小编Sea*_*anc的帖子

我遇到了一个问题,似乎阻止了CSS转换在同时改变的元素上播放display:none.

在下面的示例中,div具有相同的CSS,除了悬停在第一个上隐藏另外两个.第二个div隐藏使用visibility:hidden,第三个div 隐藏使用display:none.

当您将鼠标悬停在第一个div上时,行为符合预期:第一个div转换,另外两个隐藏.当你鼠标移出时,行为与我的期望不同:第一个div转换回正常,第二个div被取消隐藏然后转换回正常,但第三个div被取消隐藏并仍然处于正常状态.

我期待第三个div匹配第二个div的行为并且也被取消隐藏,然后转换回正常.

div{
  width:100px;
  height:50px;
  background:red;
  
  border-radius:50%;
  
  transition: border-radius 1s;
}

#hover:hover, #hover:hover ~ div{
  border-radius:0%;
}

#hover:hover ~ #hide1{
  visibility:hidden;
}

#hover:hover ~ #hide2{
  display:none;
}

<div id="hover">hover me for transition</div>
<div id="hide1">I transition back</div>
<div id="hide2">but I don't</div>

由于第二个div按预期工作,因此很容易想出使用visibility:hidden和定位CSS的替代解决方案,但是有可能只用CSS来完成这个display:none吗？如果没有,为什么display:none会以这种方式影响其他过渡？

注意:这似乎很容易找到,但我的搜索只提出了试图转换display属性本身的问题,而不是它对其他转换的副作用.