悬停时隐藏和显示图像是一种常见的交互设计模式,通常用于网页或应用程序中。当用户将鼠标悬停在某个元素上时,会显示一个图像,而当鼠标移开时,图像会消失。这种效果可以通过CSS和JavaScript来实现。
:hover
伪类来实现图像的显示和隐藏。mouseenter
和mouseleave
)来控制图像的显示和隐藏。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Image Example</title>
<style>
.hover-image {
position: relative;
display: inline-block;
}
.hover-image img {
display: none;
position: absolute;
top: 0;
left: 0;
}
.hover-image:hover img {
display: block;
}
</style>
</head>
<body>
<div class="hover-image">
Hover over me!
<img src="path/to/image.jpg" alt="Hover Image">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Image Example</title>
<style>
.hover-image {
position: relative;
display: inline-block;
}
.hover-image img {
display: none;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="hover-image" onmouseover="showImage(this)" onmouseout="hideImage(this)">
Hover over me!
<img src="path/to/image.jpg" alt="Hover Image">
</div>
<script>
function showImage(element) {
element.querySelector('img').style.display = 'block';
}
function hideImage(element) {
element.querySelector('img').style.display = 'none';
}
</script>
</body>
</html>
通过以上方法,可以实现一个高效且用户友好的悬停时隐藏和显示图像的效果。
领取专属 10元无门槛券
手把手带您无忧上云