Firefox下的高度为0悬停效果答案

【问题标题】：Height to 0 hover effect under FirefoxFirefox下的高度为0悬停效果
【发布时间】：2013-08-28 22:03:20
【问题描述】：

我在 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>

【问题讨论】：

嗯，这看起来合乎逻辑，因为它发生在你不再悬停时
也许你可以在顶部有一个不可见的 div，并使用兄弟选择器。
将其包装成一个 div 并使用 #mydiv:hover>#square
是的，brewal 是对的。工作小提琴：jsfiddle.net/D5GTx

标签： html css firefox hover transition

【解决方案1】：

您应该将它包装到一个 div 中，这样即使 #square div 不再位于指针下方，您也可以保留 hover：

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>

Demo jsFiddle

【讨论】：

【解决方案2】：

嘿，实际上，当您在悬停时更改元素的大小（特别是减小）时，您的鼠标指针会落在边界之外。所以firefox做一些闪烁是合乎逻辑的，它实际上是chrome上的一个bug，它不理解高度的变化。如果您不想弄乱您的 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();
              });
      });

【讨论】：

【解决方案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%;
}

【讨论】：