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

Question

我希望能够将鼠标悬停在一个 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

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

如果将#b 放在#a 中，则可以使用CSS 来完成，否则上面的jQuery 解决方案应该可以工作（使用jQuery 1.7+）。

Answer 3

css 解决方案需要它们是这样的：

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

显示该块的 CSS 将是：

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

你可以在这里看到这两个例子：http: //jsfiddle.net/skip405/L93x7/