将鼠标悬停在1 div以更改另一个div内容

Question

（我在这里尝试了多个帖子的提示，但仍然没有运气）

基本上我想悬停在div“b”和div“a”中的内容进行更改。在实际代码中，diva和dib有不同的父母，所以不能只做css。

简化的html：

$("#divb").hover(function() {
  $("#div a").css('content', 'url(img2.png)');
}, function() {
  $("#diva").css('content', 'url(img1.png)');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="diva">A</div>

<div id="divb">B</div>

任何帮助将非常感激:)我已经尝试了几个小时不同的方法

Answer 1

你做的很棒。你只需要将div a上的空白删除到diva以使其正常工作。

Answer 2

在你的html文件中：

<div id="diva"></div>
<div id="divb"></div>

在你的js文件中：

$('#divb').on('hover', () => {
    $("#div a").css('content','url(img2.png)');
    $("#diva").css('content','url(img1.png)');
});

Answer 3

$("#divb")将获得与id="divb"元素你应该使用#之前id没有标记名称，即div.Below是演示与示例图像

$('div#a').hover(function(){
  $('div#b').css('content','url(https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg)');
},function(){
  $('div#b').css('content','url(https://i.pinimg.com/736x/c2/9d/7d/c29d7d7388523342de339fdc2611e80f--flamingo-art-flamingo-beach.jpg?b=t)');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a">A</div>
<div id="b">B</div>