Question

如何使用jQuery在鼠标悬停图像上显示图像组？

请提供任何链接或示例代码。

Answer 1

要在鼠标悬停时显示图像，但在没有被鼠标悬停时隐藏：

  <html>
<head>
<script type="text/javascript">
function showIt(imgsrc)
{
document.getElementById('imageshow').src=imgsrc;
document.getElementById('imageshow').style.display='block';
}

function hideIt()
{
document.getElementById('imageshow').style.display='none';
}
</script>
</head>
<body>
<img src="image1.jpg" onmouseover="showIt(this.src)" onmouseout="hideIt()"><br>
<img src="image2.jpg" onmouseover="showIt(this.src)" onmouseout="hideIt()">
<br>
<br>
<br>
<img src="" id="imageshow" style="display:none">
</body>
</html>

要让它显示默认图像，即使您没有隐藏在图像上，但如果您将其隐藏在图像上，则显示图像：

<html>
<head>
<script type="text/javascript">
function showIt(imgsrc)
{
document.getElementById('imageshow').src=imgsrc;
}

function hideIt()
{
document.getElementById('imageshow').src="default.jpg";
}
</script>
</head>
<body>
<img src="image1.jpg" onmouseover="showIt(this.src)" onmouseout="hideIt()"><br>
<img src="image2.jpg" onmouseover="showIt(this.src)" onmouseout="hideIt()">
<br>
<br>
<br>
<img src="default.jpg" id="imageshow">
</body>
</html>

让它在鼠标悬停时显示图像，然后即使鼠标输出也一直显示最后一张图像：

<html>
<head>
<script type="text/javascript">
function showIt(imgsrc)
{
document.getElementById('imageshow').src=imgsrc;
}
</script>
</head>
<body>
<img src="image1.jpg" onmouseover="showIt(this.src)"><br>
<img src="image2.jpg" onmouseover="showIt(this.src)">
<br>
<br>
<br>
<img src="default.jpg" id="imageshow">
</body>
</html>

希望这会有所帮助..

需要在鼠标上显示一组图像使用jQuery悬停图像

1 个答案: