Question

我想更改悬停的特定图片。但是，每张图片都在叠加层下方。

当我将鼠标悬停在图片本身上时，发现solution可以更改图片。但是，我只能将鼠标悬停在叠加层上（图片的父div）。

<script  type='text/javascript'>
$(document).ready(function(){
$(".overlaydiv").hover(
    function() {$(this).attr("src","images/aboutR.png");},
    function() {$(this).attr("src","images/about.png");
    });
});
</script>

我是Java语言的新手，非常感谢您的帮助。

Answer 1

好吧，如果您的图片在上述叠加层中，则代码如下：

$(document).ready(function(){
$(".overlaydiv").hover(
    function() {$(this).find('img').attr("src","images/aboutR.png");},
    function() {$(this).find('img').attr("src","images/about.png");
    });
});

这应该更新<img>内的所有src标签.overlaydiv属性。

如果叠加层中有多个图像，并且每个图像上都应有一个特定的“新”图像，则可以在每个图像标签上添加新的src作为属性，并更改您的JS以使用该属性中包含的新网址更改img src（而不是在JS中对新URL进行硬编码）。

示例：

<div class="overlaydiv">
    <img src="img1.jpg" default-src="img1.jpg" hover-src="img1-2.jpg>
    <img src="img2.jpg" default-src="img2.jpg" hover-src="img2-2.jpg>
</div>

Javascript：

$(document).ready(function(){
    $(".overlaydiv").hover(
        function() {
            $(this).find('img').each(function( index ) {
                $(this).attr('src', $(this).attr('hover-src'));
            });
        },
        function() {
            $(this).find('img').each(function( index ) {
                $(this).attr('src', $(this).attr('default-src'));
            });
        });
});

这有点灵活，可以防止在JS中对URL进行硬编码。它还使它与多张图像兼容，在叠加悬停时具有不同的版本。

请注意，我们需要default-src属性才能“记住”原始的src以便在悬停假上重新设置（在悬停回调之后，当用户移出时）。您可以使用.data()来记住default-src。

Answer 2

您可以通过多种方式使用纯CSS ：

使用img 元素：

div {
  display: inline-block; /* or "inline-flex", "inline-grid" */
  position: relative;
}

div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: Aqua;
  opacity: .5;
}

.hidden, div:hover .shown {display: none}
.shown, div:hover .hidden {display: block}

<div>
  <img class="shown" src="https://placehold.it/200x200" alt="">
  <img class="hidden" src="https://dummyimage.com/200x200" alt="">
</div>

使用background: url()：

div {
  position: relative;
  width: 200px;
  height: 200px;
  background: url(https://placehold.it/200x200), url(https://dummyimage.com/200x200) no-repeat;
}

div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: Aqua;
  opacity: .5;
}

div:hover {
  background-size: 0, cover;
}

<div></div>

两者的混合物：

div {
  width: 200px;
  height: 200px;
  position: relative;
}

div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: Aqua;
  opacity: .5;
}

img {display: block}

div:hover img {display: none}
div:hover {background: url('https://dummyimage.com/200x200') no-repeat}

<div>
  <img src="https://placehold.it/200x200" alt="">
</div>

将鼠标悬停在图片的叠加层上时更改图片

2 个答案: