1

やあ、私は 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>
4

3 に答える 3

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

于 2013-08-26T12:24:02.677 に答える
0

これを試してみてください。うまくいきます。これが正しいかどうか教えてください。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%;
}
于 2013-08-26T13:45:56.427 に答える
0

実は、ホバリング時に要素のサイズを変更 (特に減少) すると、マウス ポインターが境界からはみ出してしまいます。そのため、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();
              });
      });
于 2013-08-26T12:31:11.657 に答える