Question

我正试图这样做，当父div悬停时，我可以更改子div中的图像源。例如：

<div class="parent">
    <div class="child">
        <img class="image" src=... />
    </div>
</div>

我确实找到了一个用于更改源代码的js脚本，但我不确定如何在父项悬停时触发它，也不确定如何在图像本身悬停时触发子div。该代码是，

var sourceSwap = function () {
    var $this = $(this);
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource);
}

$(function () {
    $('img.image').hover(sourceSwap, sourceSwap);
});

我想说我在逻辑上尝试的不止这些，但由于我对JS缺乏经验，我只是在黑暗中拍摄。我在这方面找不到任何东西，而且真的让我难过。有没有比我尝试更容易实现这一目标的方法？无论如何，我们赞赏一个解决方案。

Answer 1

您可以使用background属性通过css执行此操作。这是一个例子：http://jsfiddle.net/SAMdroid/p2CZU/。基本上它只是在css中使用src而不是在html中使用src：

.child {
    content: url("http://placekitten.com/200/200")
}

.parent:hover > .child {
    content: url("http://placekitten.com/200/250")
}

当然，你的大部分代码都在css中，这不是很干净:(

只是一个想法：D

Answer 2

SAMdroid的CSS解决方案可以很好地工作，假设您的图像URL是静态的，但是如果他们需要根据其他内容进行更改，那么这将是一个小提琴，它将基于鼠标进入和离开来替换内部标记的属性元件。

http://jsfiddle.net/A9mB5/

$(function () {
    var orig;
    $('.parent').mouseenter(function () {
        var img = $(this).find('.img');
        if (!orig){
            orig = img.text();
        }
        img.text('Hover Text');
    }).mouseleave(function(){
        $(this).find('.img').text(orig);
    });
});

为了更简单的例子，我换掉了文本而不是图像。

Answer 3

此代码使用jQuery libriry，因此您需要在包含脚本之前将其包含在页面中。

$()通过ussual css或一些额外的jQuery单词来抓取HTML元素。 .find允许我们在另一个子元素中查询HTML元素。这些命令是查询，因此可能持续很长时间。这就是为什么我们将结果保存在变量中以避免多次执行查询。 ready和hover是文档和父div的事件，我们设置将在事件发生时执行的回调函数。如果提供了2个参数（属性和值），.attr允许我们更改属性值，如果提供了一个参数（属性），则获取属性的当前值。

$(document).ready(function() {

    var $parentDiv = $("div.parent");
    var $image = $parentDiv.find("img.image");
    $parentDiv.hover(function() {
        $image.attr("src", "oneImageSource.jpg");
    }, function() {
        $image.attr("src", "anotherImageSource.jpg");
    });

});

使用JS更改父级悬停时的图像

3 个答案: