悬停一个同级的div，其它同级div不显示？？？？

Question

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其中任意一个，其它的都隐藏.

Answer 1

//这里是个人理解 由于一开始你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;
}

Answer 2

可以用JS控制,写在hover事件里面

$("div").show().siblings().hide()

Answer 3

css选择器中貌似没有直接可以获取所有同级元素的，如果允许使用jq的话 ，可以用siblings() 方法

Answer 4

可以参考一下这个https://blog.csdn.net/cicada_...