0

ユーザーが要素にカーソルを合わせると要素が消える効果を作成しようとしています。以下のコードを試してみましたがdisplay:none;、CSS が壊れているようです。CSS が機能しない理由と、問題を解決する方法を知りたいです。

http://jsfiddle.net/2c42U/

<div class="foo">text</div> 

.foo:hover {
    color: red;
    display: none;
}
4

6 に答える 6

10

代わりに要素の不透明度を変更してみてください: http://jsfiddle.net/XtmVQ/

.foo:hover {
    opacity:0;
}
于 2013-03-12T20:02:52.073 に答える
3

display:none の代わりにこれを試してください

visibility:hidden
于 2013-03-12T20:04:05.097 に答える
1

@Richardが言ったように、不透明度を使用してください

また、逆方向にするには、次のようにします。

filter:alpha(opacity=0); /* For IE8 and earlier */

また、トランジションを追加することもできます:

transition: 0.5s

瞬時にならないように。

于 2013-03-12T20:06:28.013 に答える
1

他の人が提案したことを行うことができますopacity: 0;またはvisibility:hidden;を使用しますが、ページの流れから隠す必要がある場合。次に、次の操作を行います。

次のような CSS を使用します。

.hidden{
    display: none !important;
}

クラスhiddenを使用して、それを任意の要素に適用して非表示にすることができます。ホバー動作を実現するには、クラス名を適用するために JavaScript/jQuery が必要です。http://jsfiddle.net/rkH7F/を参照してください

于 2013-03-12T20:09:03.407 に答える
1

これを試して：

.foo:hover {
    opacity: 0;
}

これに対するあなたの最終的な意図は何ですか？

于 2013-03-12T20:04:23.633 に答える
-2

cssは動かないと思います。jqueryを使う

アップデート

ああ、悪い。css は機能しますが、jquery の方が効果的です。

     $('#outer').mouseenter(function() {
       $("#outer").hide();
     }); $('#outer').mouseleave(function() {
       $("#outer").show();
     });

修繕

     $('#outer').mouseenter(function() {
       $("#outer").slideUp();
     }); $('#outer').mouseleave(function() {
       $("#outer").slideDown();
     });
于 2013-03-12T20:02:30.170 に答える