当鼠标悬停在另一个 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 被应用,当鼠标移开时,它们都回到普通的。</p>
谁能帮我?