使用 JS 在悬停时显示文本

Posted

技术标签:

【中文标题】使用 JS 在悬停时显示文本【英文标题】:Show text on hover with JS 【发布时间】:2021-11-04 11:33:16 【问题描述】:

我正在努力使用 jQuery :( 不知道如何实现可能是有史以来最简单的事情。

我想使用这个 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>

所以在图像悬停时,我想显示来自 layer-term-name 类的文本 White。

【问题讨论】:

你需要使用 css 或 javascript 来做这样的事情 你能编辑和修复流浪的不匹配的&lt;/a&gt;吗?这个问题让人分心。 还想知道title 属性是否足够?例如:***.com/questions/11022843/… 【参考方案1】:

您只需使用 javascript 和 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"  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>

【讨论】:

我的荣幸

以上是关于使用 JS 在悬停时显示文本的主要内容,如果未能解决你的问题,请参考以下文章

仅在悬停时显示 d3 节点文本

在 img 鼠标悬停时显示 div (jquery)

仅使用 CSS 悬停时显示文本

HTML CSS 在悬停时显示文本框

通过 CSS 在文本框悬停时显示列表框

Tailwind CSS:在图像悬停时显示文本