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

Posted 2023-05-08

【中文标题】将鼠标悬停在 1 个 div 上以更改另一个 div 内容

【英文标题】：Hovering over 1 div to change another divs content

【发布时间】：2019-07-30 01:52:54

【问题描述】：

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

基本上我想将鼠标悬停在 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>

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

【参考方案1】：

你做得很好。您只需要删除 div a 到 diva 上的空格即可使其正常工作。

【参考方案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)');
);

【参考方案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>