将鼠标悬停在 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下面是带有示例图像的演示

 $('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>