Question

Hy我在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，所以即使hover div不再在指针下面，你仍然保持#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>

<强> Demo 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%;
}

在Firefox下高度为0的悬停效果

3 个答案: