2

我有一个带有叠加 DIV 的图像，当我将鼠标悬停在图像上时，它会显示 2 个图像，这很好用，但我希望它是动态的并且适用于页面上的无数图像，目前它仅适用于第一张图片，我我对 javascript 和 jquery 不太好，希望您能在这方面提供帮助。

jQuery代码：

$("#imageOverlay").hover(
    function() {
        $(this).children("img").fadeTo(200, 0.7).end().children("#hover").show();
    },
    function() {
        $(this).children("img").fadeTo(200, 1).end().children("#hover").hide();
});

HTML 代码：

<div id="imageOverlay">
  <div id="hover">
    <a href="#"><img src="http://placehold.it/100x30&text=Full View" /></a>
    <a href="#1"><img src="http://placehold.it/100x30&text=Similar" /></a>
  </div>
  <img src="http://placehold.it/1000x1000&text=Thumbnail">
</div>

CSS 代码：

#imageOverlay {
    display: inline;
    position: relative;
}
#imageOverlay #hover {
    display: none;
    position: absolute;
    margin-top: 10px;
    margin-right: 10px;
    z-index: 2;
}
#imageOverlay #hover a {
    width: 100px;
    height: 30px;
    display: block;
    margin-bottom: 5px;
}
4

2 回答 2

3

#imageOverlay为and使用一个类#hover，你只能有一个 ID 的实例，所以当你有多个这些 ID 时，函数只会找到第一个。此外，只是淡化容器框，而不是每个单独的图像。此外，stop()在动画之前使用，以确保当人们在您的元素上下移动鼠标时不会出现奇怪的行为。然后，将主图像放在首位确保悬停的图像“在顶部”，而不必担心z-index.

HTML

<div class="imageOverlay">
  <img src="http://placehold.it/1000x1000&text=Thumbnail">
  <div class="hover">
    <a href="#"><img src="http://placehold.it/100x30&text=Full View" /></a>
    <a href="#1"><img src="http://placehold.it/100x30&text=Similar" /></a>
  </div>
</div>

JS

//fade out the images initially
$(".imageOverlay .hover").fadeTo(0, 0)
$(".imageOverlay").hover(
    function() {
        $(this).find(".hover").stop().fadeTo(200, 1);
    },
    function() {
        $(this).find(".hover").stop().fadeTo(200, 0);
    } //when writing clean code, be sure your closer ends at the same indent as your opener
);

CSS

.imageOverlay {
    display: inline-block;
    position: relative;
}
.imageOverlay .hover {
    position: absolute;
    top: 10px;
    right: 10px;
}
.imageOverlay .hover a {
    width: 100px;
    height: 30px;
    display: block;
    margin-bottom: 5px;
}

当您悬停时，您的图像应该显示在顶部！

于 2012-12-07T19:44:43.017 回答
2

创建#imageOverlay一个类并将其应用于 html 中的多个属性。

CSS：

.imageOverlay
    //css rules

jQuery：

$(".imageOverlay").hover(
  function() {
      $(this).children("img").fadeTo(200, 0.7).end().children("#hover").show();
  },
  function() {
      $(this).children("img").fadeTo(200, 1).end().children("#hover").hide();
});

html:

<div class="imageOverlay">
   // do stuff
</div>
<div class="imageOverlay">
   // do stuff
</div>
于 2012-12-07T19:39:06.500 回答