jquery - 1 つの div にカーソルを合わせるかクリックして、別の div に影響を与えます

Question

ある div にカーソルを合わせて、別の div に影響を与えることができるようにしたいと考えています。

<div id="a">1</div>
<div id="b" style="display:none;">2</div>

#a をホバーして #b を表示させるには? css3 ソリューションが欲しいのですが、jquery も良いです。

Answer 1

これはクロームで動作します：

http://jsfiddle.net/iambriansreed/uQfKw/

HTML：

<div id="a">1</div>
<div id="b">2</div>

CSS：

#a + #b {
    display: none;

}
#a:hover + #b {
    display: block;

}

Answer 2

CSS ソリューションでは、次のようにする必要があります。

<div id="a">1
    <div id="b">2</div>
</div>

ブロックを表示する CSS は次のようになります。

#a:hover #b{
    display: block;
}

ここで両方の例を見ることができます: http://jsfiddle.net/skip405/L93x7/

Answer 3

$("#a").on({
     mouseenter: function() {
         $("#b").show();
     },
     mouseleave: function() {
         $("#b").hide();
     },
     click: function() {
         alert('Holy crap! Someone clicked me!');
     }
});

#a 内に #b を配置する場合は、CSS でそれを行うことができます。それ以外の場合は、上記の jQuery ソリューションが機能するはずです (jQuery 1.7+ を使用)。