0

我有一个简单的函数，可以在鼠标悬停时更改图像的来源，并在鼠标悬停时将其改回。它工作得很好，但是当我尝试将此效果应用于具有相同类的多个图像时，错误的图像被替换了。所以我为每个鼠标悬停图像编写了不同的函数。它正在变得太多的代码。有人可以给我一些想法，我可以如何压缩此代码以使具有特定类的所有图像切换到它们适当的悬停图像并返回。

$(document).ready(function(){
var passiveBio = $("#index_container img.bio").attr("src");
var hoverBio = passiveBio.replace(".jpg", "_hover.jpg");
$("#index_container img.bio")
    .mouseover(function() { 
        $(this).attr("src", hoverBio);
        })
    .mouseout(function() {
        $(this).attr("src", passiveBio);
        });
var passiveSamples = $("#index_container img.samples").attr("src");
var hoverSamples = passiveSamples.replace(".jpg", "_hover.jpg");
$("#index_container img.samples")
    .mouseover(function() { 
        $(this).attr("src", hoverSamples);
        })
    .mouseout(function() {
        $(this).attr("src", passiveSamples);
        });
var passiveServices = $("#index_container img.services").attr("src");
var hoverServices = passiveServices.replace(".jpg", "_hover.jpg");
$("#index_container img.services")
    .mouseover(function() { 
        $(this).attr("src", hoverServices);
        })
    .mouseout(function() {
        $(this).attr("src", passiveServices);
    });});

这是带有图像的 div。

<div id="index_container">
    <a href="samples.html"><img class="index_box samples" src="images/samples.jpg"/></a>
    <a href="services.html"><img class="index_box services" src="images/services.jpg"/></a>
    <a href="about.html"><img class="index_box bio" src="images/bio.jpg"/></a>
    <img class="index_box" src="images/grey.png"/>
    <img class="index_box" src="images/light_blue.png"/>
    <img class="index_box" src="images/dark_blue.png"/>
    <img class="index_box" src="images/grey.png"/>
    <img class="index_box" src="images/light_blue.png"/>
    <img class="index_box" src="images/dark_blue.png"/>
    <p class="clear"></p>
</div>

我尝试将所有 a 图像设为同一类，并将 .jpg 更改为 _hover.jpg 但它们没有更改为正确的图像。他们都变成了同一个悬停图像，而不是他们自己的。

预先感谢您的帮助！

4

1 回答 1

5

定位所有图像，或者给它们一个公共类并将其用作选择器，然后在函数内部进行动态替换：

$('#index_container img').on({
    mouseenter: function() {
        this.src = this.src.replace('.jpg', '_hover.jpg');
    },
    mouseleave: function() {
        this.src = this.src.replace('_hover.jpg', '.jpg');
    }
});
于 2013-03-26T18:10:26.907 回答