使用 jQuery 在悬停时交换 DIV 类答案

【问题标题】：Swap DIV class on hover with jQuery使用 jQuery 在悬停时交换 DIV 类
【发布时间】：2014-06-22 12:09:26
【问题描述】：

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

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，因此您可以看到正在发生的事情。

有什么建议吗？

【问题讨论】：

为什么不使用 css hover ？
在切换到另一个 div 并鼠标移出后，您要保持状态还是恢复默认状态？
@servabat 我不确定你的意思？
@MaulikAnand 我希望它恢复到默认状态。
以一种说法 :) 使其用户友好用户如何知道此处需要悬停你也需要给他们指导 :)

标签： jquery css hover toggle hidden

【解决方案1】：

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

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

工作Demo

【讨论】：

啊，你也改变了JS！好的，这是有道理的。非常感谢阿米特；）