Question

我不知道为什么，但更改父级的显示属性会破坏子元素的转换。

HTML

<div class="grandfather">
    <div class="father">
        <div class="child1 children"></div>
        <div class="child2 children"></div>
    </div>
</div>

CSS

.grandfather{
    width: 500px;
    height: 500px;
    background: green;
}

.father{
    height: 250px;
    background: red;
    display: none;
}

.grandfather:hover .father{
    display: block;
}

.child1,
.child2{
    width: 50px;
    height: 50px;
    background: blue;
    display: inline-block;
    opacity: 0;
    transition: all 1s linear;
}

.grandfather:hover .children{
    opacity: 1;
}

小提琴： http://jsfiddle.net/bdu3fno2/5/

注意：我知道在这种特殊情况下不需要更改显示，我可以改变不透明度并且效果很好，但有趣的是，为什么浏览器的行为如此 - 这是某种优化吗？我认为这不是CSS规范的一部分。

Answer 1

将opacity与visibility

一起使用

＆＃13;

.grandfather {
  width: 500px;
  height: 500px;
  background: green;
}
.father {
  height: 250px;
  background: red;
  opacity: 0;
  visibility: hidden;
  transition: all 1s linear;
}
.grandfather:hover .father {
  opacity: 1;
  visibility: visible;
}
.child1,
.child2 {
  width: 50px;
  height: 50px;
  background: blue;
  display: inline-block;
  opacity: 0;
  transition: all 1s linear;
}
.grandfather:hover .children {
  opacity: 1;
}

＆＃13;

<div class="grandfather">
  <div class="father">
    <div class="child1 children"></div>
    <div class="child2 children"></div>
  </div>
</div>

＆＃13;

显示更改中断转换

1 个答案: