jquery - 使用 jQuery 在悬停时交换 DIV 类

Question

这就是我要实现的目标:

2 个 DIV，在页面加载时第一个 DIV 是可见的，悬停时它切换到第二个 DIV(最初是隐藏的)。

两个 DIV 的高度和宽度都相同，并且绝对位于包装内。

这是我到目前为止所得到的，但它不能正常工作 -

JS:

 (function($) { 
 $(".wrap").hover(function() {
 $(".first,.second", this).toggle();
 })
 })( jQuery );

CSS:

 .wrap {position:relative;}

 .first {
 position:absolute;
 top:0;
 padding:20px;
 width:80px;
 height:80px;
 background:green;
 color:white;
 display:block;
 }

 .second {
 position:absolute;
 top:0;
 padding:20px;
 width:80px;
 height:80px; 
 background:yellow;
 color:blue;
 display:block;
 visibility:hidden;
 }

HTML:

<div class="wrap">
<div class="first">FIRST DIV</div>
<div class="second">SECOND DIV</div>
</div>

这是一个有效的 FIDDLE这样您就可以看到发生了什么。

有什么建议吗？

Answer 1

不要使用visibility:hidden，而是使用display:none

.second {
      position:absolute;
      top:0;
      padding:20px;
      width:80px;
      height:80px; 
      background:yellow;
      color:blue;
      display:none;
}

工作 Demo