悬停或单击一个div以影响另一个div

Question

I'd like to have ability to hover on one div to affect another.

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

How to hover #a and make #b appear? I'd like a css3 solution but jquery also is good.

Answer 1

This works in chrome:

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

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

If you place #b inside #a, you could do it with CSS, otherwise the jQuery solution above should work (with jQuery 1.7+).

Answer 3

A css solution would need them to be like this:

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

the css to show the block would be:

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

You can see both of the examples here: http://jsfiddle.net/skip405/L93x7/