Firefox下的高度为0悬停效果

Posted 2023-05-08

【中文标题】Firefox下的高度为0悬停效果

【英文标题】：Height to 0 hover effect under Firefox

【发布时间】：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

【参考方案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%;