html Glossary with Alt Text

Glossary with Alt Text

In this example, we'll create a simple glossary with HTML and CSS code. The glossary will have a list of terms with their definitions, and each term will have an associated alt text for accessibility purposes.

Interactive CSS and JS

To see the interactive CSS and JS in action, please copy and paste the following code into your browser's developer tools (right click on the page, select "inspect" or "open with developer tools"):

<script>
document.addEventListener("DOMContentLoaded", function() {
    var glossaryItems = document.querySelectorAll(".glossary-item");
    Array.from(glossaryItems).forEach(function(item) {
        item.addEventListener("mouseover", function() {
            this.querySelector(".glossary-term").style.color = "blue";
        });
        item.addEventListener("mouseout", function() {
            this.querySelector(".glossary-term").style.color = "black";
        });
        item.addEventListener("click", function() {
            alert("Term: " + this.querySelector(".glossary-term").textContent + "
Definition: " + this.querySelector(".glossary-definition").textContent);
        });
    });
});
</script>