html - Firefox下的高度为0悬停效果

Question

我在FF下有问题。当我尝试在 div 上使用悬停将高度转换为 0 时，它只是奇怪地工作。有没有办法让它像在 Chrome 下一样工作？代码是：

CSS：

#square{
    position:fixed;
    top:50%;
    left:40%;
    width:11%;
    height:22%;
    background-color:blue;
    transition:height 0.8s linear;
    -webkit-transition:height 0.8s linear;
    -moz-transition:height 0.8s linear;
}

#square:hover{
    height:0%;
}

HTML：

<div id="square"></div>

Answer 1

您应该将其包装到一个 div 中，以便当div 不再位于指针下时保持hover均匀：#square

CSS

#mydiv {
    position:fixed;
    top:50%;
    left:40%;
    width:11%;
    height:22%;
}
#mydiv:hover>#square {
    height:0%;
}

HTML

<div id="mydiv">
    <div id="square"></div>
</div>

演示 jsFiddle

Answer 2

Hy，实际上，当您在悬停时更改元素的大小（特别是减小）时，您的鼠标指针会落在边界之外。所以firefox做一些闪烁是合乎逻辑的，它实际上是chrome上的一个错误，它不理解高度的变化。如果您不想弄乱您的 html 结构（添加嵌套的 dIV 作为悬停元素的持有者），最好的方法是使用 javascript（我更喜欢 jQuery）：

      $(document).ready(function(){
              $('#square').hover(function(){
                   $(this).css('height',0);
                   //or use the following line if you want to hide the element:
                   $(this).hide();
              });
      });

Answer 3

试试这个它会正常工作。告诉我这是否正确。HTML

 <div id="squarebox">
       <div id="square"></div>
    </div>

CSS

#squarebox{
    position:fixed;
    top:50%;
    left:40%;
    width:11%;
    height:22%;
}
#squarebox > #square{
    width:100%;
    height:100%;
    background:#ccc;
    transition:all ease-in-out .3s 0s;
}
#squarebox:hover > #square {
    height:0%;
}