我正在寻找一种方法,当鼠标悬停在另一个 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>
所以,我希望实现的是,当鼠标悬停在“hovered_div”上时,该div的悬停状态以及其他三个div被应用,当鼠标移开时,它们全部恢复正常。
有人可以帮助我吗?
最佳答案
我建议使用 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');
});
关于jquery - 当另一个 div 悬停时,将悬停状态应用于多个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13919855/