2

以下のcssを持つクラスBの要素があります

.B {display：none; }

カーソルを合わせると以下のcssを持つクラスAの要素

A：ホバー.B {display：block; }

私が達成したいcss効果は、クラスAの要素にカーソルを合わせると、クラスBの要素が表示されることです。これは正しいです？現在、私が欲しいものを私に与えていません。助けてくれてありがとう

4

6 に答える 6

1

CSS が機能するはずです。

しかし、.B が .A 内の唯一の要素である場合、.A の表示サイズは 0px x 0px になる可能性があります。

これは、:hover 疑似クラスがトリガーされないことを意味します。

css を使用して .a のサイズを強制するか、その中に非表示の要素を追加してサイズを拡大することができます。

于 2013-02-05T13:14:40.797 に答える
0

CSS では、DOM ツリーの任意の要素に対してこれを行うことはできません。そのためには JavaScript を使用する必要があります。

于 2013-02-05T13:09:20.313 に答える
0

.Bクラスがクラスの子である場合にのみ機能し.Aます。

ここの例はhttp://tinkerbin.com/V7ELzMRM の子であるため動作し、ここでは http://tinkerbin.com/EhEYIlJLの子ではないため動作しません。.B.A.B.A

実際のデモ: http://tinkerbin.com/V7ELzMRM

于 2013-02-05T13:09:38.393 に答える
0

あなたのCSSは絶対に正しいですが、CSSを適切に機能させるには、次のHTMLが必要であることを覚えておいてください

<div class="A">
  <div class="B">
  </div>
</div>

Htmlが上記と同じでない場合は、jQueryを使用してください

于 2013-02-05T13:15:16.667 に答える
0

これは、.B が .A にネストされている場合、または DOM でその隣にある場合にのみ機能します。

.A:hover + .B {
   display:block;
}

ここでこれをテストできます: http://cssdesk.com/Mwzzv

そうでない場合は、JS (この場合は jQuery) を使用する必要があります。

$(".A").hover(function(){ $(".B").show() },function(){ $(".B").hide() });
于 2013-02-05T13:10:50.700 に答える
0

jqueryを使用できます：

$(documnet).ready(function(){
  $(".A").hover(function(){
    $(".B").css("display", "block");
  });
});

またはこれを使用できます：

$(documnet).ready(function(){
  $(".A").mouseenter(function(){
    $(".B").css("display", "block");
  });

$(".A").mouseleave(function(){
  $(".B").css("display", "none");
   });
});
于 2013-02-05T13:16:12.027 に答える