jquery - 使用jquery进行图像查找并替换为另一个<div>上的mouseenter

基本上，我有两个图像，每个图像位于一个单独的div中。当我在第一个图像上进行鼠标输入时，我需要第二个图像在另一个div中进行更改。

更改后的图像位于代码中带有鼠标输入的图像之后。到目前为止，我有

<script>

var Read1 = $("img[src$='/reading1.png']");
var Read2 = $("img[src$='reading2.png']");


$('#shelf-1').mouseenter(function() {
$('#read').find(Read1).replaceWith(Read2)
});
</script>

我对使用jQuery非常陌生，因此感到迷茫。任何帮助将不胜感激。

最佳答案

将id放在图片标签上，而不是在div上，以便更轻松地访问它们。然后简单

$('#read1').mouseenter(function () {
    $('#read2').attr('src', 'reading2.png');
});

如果您的解决方案被出售，那么它无法正常工作的原因是因为变量Read1和Read2不正确。 Read1应该是您要查找的字符串选择器，而Read2应该是您要替换元素的正确html。以下应该工作：

<script>
    var Read1 = "img[src$='/reading1.png']";
    var Read2 = "<img src='path/to/reading2.png'>";

    $('#shelf-1').mouseenter(function() {
       $('#read').find(Read1).replaceWith(Read2)
    });
</script>