1

当鼠标悬停在另一个 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

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

jsFiddle

所以,我希望实现的是,当鼠标悬停在“hovered_div”上时,该 div 的悬停状态和其他三个 div 被应用,当鼠标移开时,它们都回到普通的。​</p>

谁能帮我?

4

2 回答 2

3

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

$('#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');

});
于 2012-12-17T19:06:14.810 回答
0

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

于 2012-12-17T18:35:02.833 回答