使用 JS 悬停显示文本
Show text on hover with JS
我正在努力 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>
因此,在图像悬停时,我想显示图层术语名称 class 中的白色文本。
您可以简单地使用 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" 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>
我正在努力 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>
因此,在图像悬停时,我想显示图层术语名称 class 中的白色文本。
您可以简单地使用 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" 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>