4 . HTML中的图片，在大图中悬停时需要帮助显示小图片

4 Images in HTML, need help to show the small picture when hovered in the large picture

本文关键字：帮助 显示 HTML 悬停      更新时间：2023-09-26

所以我在HTML中有3张图片，下面是一张大的，下面的1张大的是与前3张图片中的一张相同的图像。没有缩略图或任何使用。所有我想要做的是，当我悬停在第一个小图像，它应该显示和改变底部的图像，如果我悬停离开它改变回原来的，和其他2张照片一样，当我悬停在底部的大图片应该应该。(in html)

Pic1 pic2 pic3

Pic4(大)

  <img src="guitars.jpg" width="80" height="60" alt="Guitars"> 
  <img src="control.jpg" width="80" height="60" alt="Control Room" onmouseover=""> 
  <img src="singing.jpg" width="80" height="60" alt="Singing Room" onmouseover=""> 
  <br> 
  <img src="guitars.jpg" width="400" height="300">

我将给你一个只有两个元素的例子(只有一个元素具有事件功能)，然后你可以扩展到3个图像。基本思想是将大图像的src更改为悬停时图像的this.src(在JS中是onmouseover事件)。然后在onmouseout上设置src回到它的正常图像。如果原始图像只是第一个小图像，只需将其设置为<img>元素。否则就记录下来。

在下面的例子中，#main是大图像，#apple是第一个小图像，#banana是第二个小图像。

// This gets the original src of the main (large image)
// That way when it's changed we can refer to this variable to revert it
var original = document.getElementById("main").src;
// On mouseover the "banana" image, that the src of the main image to src of the banana
document.getElementById("banana").onmouseover = function(){
    document.getElementById("main").src = this.src;
}
// On mouseout of "banana" we change the main image back to it's original image
document.getElementById("banana").onmouseout = function(){
    document.getElementById("main").src = original;
}
<<p> 小提琴例子/strong>

一个简单的解决方案是在小图像上实现onclick或onmouseover事件，并更新大图像的src值。

参考:http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb

如果你想在将来轻松地添加更多的图像，那么你可能需要一个带有自定义分页的滑块。

如果你熟悉jQuery，我推荐这个插件，因为它非常容易使用:

http://jquery.malsup.com/cycle2/(查看carousel寻呼机演示)

祝你好运!

尝试使用css :hover, :nth-of-type(), :not()，一般兄弟姐妹选择器

img:not(.lg) {
  width:50px;
  height: 50px;
}
img.lg {
  width:160px;
  height:160px;
  background-image:url(http://placehold.it/160/ff0000/ffffff);
}
img:nth-of-type(1) {
   background-image:url(http://placehold.it/50/ff0000/ffffff);
}
img:nth-of-type(2) {
   background-image:url(http://placehold.it/50/00ff00/ffffff);
}
img:nth-of-type(3) {
   background-image:url(http://placehold.it/50/0000ff/ffffff);
}
img:nth-of-type(1):hover ~ .lg {
  background-image:url(http://placehold.it/160/ff0000/ffffff);
}
img:nth-of-type(2):hover ~ .lg {
  background-image:url(http://placehold.it/160/00ff00/ffffff);
}
img:nth-of-type(3):hover ~ .lg {
  background-image:url(http://placehold.it/160/0000ff/ffffff);
}
<img /> <img /> <img /> <br />
<img class="lg" />

相关文章：