Question

这就是我想要实现的目标：

2 DIV＆＃39; s，在页面加载时第一个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

使用jQuery悬停交换DIV类

1 个答案: