Show text on hover with JS

Question

I'm struggling with jQuery :( dunno how to implement probably the simplest thing ever.

I want to show the text on hover using this HTML

<li class="wc-layered-nav-term  with-swatch-image">
<span class="swatch-inner">
<span class="filter-swatch">
<span style="background-image: url(white);" class="">white</span></span>
<span class="layer-term-name">White</span></span>
<span class="count">1</span></li>

So on the hover of an image, I want to show the text White from the layer-term-name class.

You will need to use either css or javascript to do such kind of thing — BladeOfLightX, Sep 07 '21 at 14:57
Can you please edit and fix the stray unmatched ``? It's distracting to the question. — Wyck, Sep 07 '21 at 15:04
Also wondering if the `title` attribute may be sufficient? e.g.: https://stackoverflow.com/questions/11022843/add-hover-text-without-javascript-like-we-hover-on-a-users-reputation — Wyck, Sep 07 '21 at 15:08

score 1 · Accepted Answer · answered Sep 07 '21 at 15:10

You can do this simply by using javascript and html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="https://rukminim1.flixcart.com/image/416/416/j7usl8w0/poster/5/c/h/medium-beautiful-nature-wallpapers-poster-png6n7po1154-original-imaexz5rzfmqkkv8.jpeg?q=70" alt="" class="image">

    <br><br><br><br>

    <div class="text-on-hover" style="display: none;">The Image Is Hovered</div>
    
    <script>
        const image = document.querySelector("img")
        const text = document.querySelector("div")

        image.addEventListener("mouseenter" , () => {
            text.style.display = "block"
        })

        image.addEventListener("mouseleave" , () => {
            text.style.display = "none"
        })
        
    </script>

</body>
</html>

Show text on hover with JS

1 Answers1