div:hover ~ div{display: none}
<div id="one" >aaaaaaaaaaaa</div>
<div id="two">bbbbbbbbbbbbbbb</div>
<div id="three">cccccccccccc</div>
<div id="four">ddddddddddddd</div>
<div id="five">eeeeeeeeeeeeeeeee</div>
这样只会悬停one的时候,其它都会隐藏,
悬停two的时候three,four,five会隐藏
悬停three的时候只有four,five会隐藏
以此内推
我想要的效果是悬停5个div其中任意一个,其它的都隐藏.
css选择器中貌似没有直接可以获取所有同级元素的,如果允许使用jq的话 ,可以用siblings() 方法
//这里是个人理解 由于一开始你display:none div 可能导致div无法被点击到
//所以你可以先每个单div 设置一个父层div
//例如:
<div>
<div>1</div>
</div>
<div>
<div>2</div>
</div>
<div>
<div>3</div>
</div>
<div>
<div>4</div>
</div>
<div>
<div>5</div>
</div>
//这样div可以写成这样
div{
width:40px;
height:40px;
}
div div{
background: red;
}
div div{
display: none;
}
div:hover div{
display: block;
}
可以用JS控制,写在hover事件里面
$("div").show().siblings().hide()