Javascript 使用JS更改父对象悬停时的图像

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

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

---

我想说，从逻辑上讲，我尝试了更多，但我只是在黑暗中拍摄，因为我对JS缺乏经验。我在这件事上找不到任何东西，这真的让我难堪。有没有比我所尝试的更容易实现的方法？无论如何，一个解决方案是值得赞赏的。

您可以通过css，使用background属性来实现这一点。下面是一个例子：。 基本上，它只是在css中使用src，而不是在html中使用src：

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

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

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

---

只是一个想法：D

您可以通过css，使用background属性来实现这一点。下面是一个示例：。 基本上，它只是在css中使用src，而不是在html中使用src：

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

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

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

---

只是一个想法：D

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

---

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

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

---

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

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

$（）

通过ussual css或一些附加的jQuery词来获取HTML元素。

。find

允许我们在另一个元素的子元素之间查询HTML元素。这些命令是查询，因此它们可能会持续很长时间。这就是为什么我们将结果保存在变量中以避免多次查询。

ready

和

hover

是事件文档的s和父div，我们设置了事件发生时将执行的回调函数。

.attr

允许我们在提供了两个参数（一个属性和一个值）的情况下更改属性值，并在提供了一个参数（一个属性）的情况下获取属性的当前值

---

这段代码使用jquerylibriry，所以在包含脚本之前需要将其包含到页面中

$（）

通过ussual css或一些附加的jQuery词来获取HTML元素。

。find

允许我们在另一个元素的子元素之间查询HTML元素。这些命令是查询，因此它们可能会持续很长时间。这就是为什么我们将结果保存在变量中以避免多次查询。

ready

和

hover

是事件文档的s和父div，我们设置了事件发生时将执行的回调函数。

.attr

允许我们在提供了两个参数（一个属性和一个值）的情况下更改属性值，并在提供了一个参数（一个属性）的情况下获取属性的当前值

---

为每个添加一个

，以确保它们立即开始缓存。（防止闪烁）。为每个添加一个

，以确保它们立即开始缓存。（防止闪烁。）

$(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);
    });
});

$(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");
    });

});