当悬停另一个 div 时，将悬停状态应用于多个 div

Posted 2023-05-08

【中文标题】当悬停另一个 div 时，将悬停状态应用于多个 div

【英文标题】：Apply the hover state to multiple divs when another div is hovered over

【发布时间】：2012-12-04 21:14:28

【问题描述】：

我正在寻找一种方法，当鼠标悬停在另一个 div 上时，将悬停状态应用于我页面上的所选 div。

希望这段代码能更好地解释我需要什么...

CSS
​#hovered_div 
position:absolute;
width:50px;
height:50px;
margin-top:25px;
margin-left:25px;
background-color:blue;   

#hovered_div:hover 
background-color:red;   


#div1 
position:absolute;
width:50px;
height:50px;
margin-top:100px;
margin-left:100px;
background-color:yellow;   

#div1:hover 
background-color:green;
width:75px;    


#div2 
position:absolute;
width:50px;
height:50px;
margin-top:100px;
margin-left:25px;
background-color:pink;   

#div2:hover 
background-color:black;
height:250px;    


#div3 
position:absolute;
width:50px;
height:50px;
margin-top:25px;
margin-left:100px;
background-color:purple;   

#div3:hover 
background-color:grey;
width:150px;    


html

​<div id="hovered_div"></div>
​<div id="div1"></div>
​<div id="div2"></div>
​<div id="div3"></div>​​​​​​​​​​​​​​​​​​​​​​   

jsFiddle

所以，我希望实现的是，当鼠标悬停在“hovered_div”上时，该 div 的悬停状态和其他三个 div 被应用，当鼠标移开时，它们都恢复正常。 ​

谁能帮帮我？

【问题讨论】：

只需使用.hover(inFunction, outFunction) 方法并应用.css("propery", "value") 的样式。由于一切都在做不同的事情，因此没有真正聪明的方式来应用样式或任何东西

这样的？？？ jsfiddle.net/jcalonso/cX7UC/1

@jcalonso - 效果很好，谢谢！

【参考方案1】：

我建议使用 css 类而不是 :hover。这将允许您在鼠标悬停和鼠标移出时设置类属性。 JS Fiddle Example

$('#hovered_div').mouseover(
  function () 
      $('#div1').attr('class','hover');
      $('#div2').attr('class','hover');
      $('#div3').attr('class','hover');
  );

$('#hovered_div').mouseout(function() 
 $('#div1').attr('class','');
    $('#div2').attr('class','');
      $('#div3').attr('class','');

);

您必须将您的 css 更改为以下内容（将 ':hover' 更改为 '.hover'）

#div1.hover 
 background-color:green;
width:75px;    

修改后的做法

$("#hovered_div").mouseover(function() 
    $('#div1').attr('class', 'hover');
    $('#div2').attr('class', 'hover');
    $('#div3').attr('class', 'hover');
).mouseout(function() 
    $('#div1').removeClass('hover');
    $('#div2').removeClass('hover');    
    $('#div3').removeClass('hover');

);

【讨论】：

正是我想要的，我还可以保留一个 :hover 部分以允许 div 独立操作，然后保留 .hover 部分用于分组悬停状态。谢谢！

实际上，使用 .hover(function() 似乎更有效。就像在 jcalonso 的 jsfiddle 中一样。但它是使用 class 而不是 :hover 的相同方法

同意...我没有意识到有一个 .toggleClass

【参考方案2】：

:hover 效果只能应用于子元素。