Question

当我用鼠标悬停另一个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被应用，当鼠标移开时，它们全部恢复正常。

任何人都可以帮助我吗？

Answer 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');

});

Answer 2

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

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

2 个答案: