使用 jQuery 在悬停时交换 DIV 类

Swap DIV class on hover with jQuery(使用 jQuery 在悬停时交换 DIV 类)

问题描述

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

This is what I'm trying to achieve :

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

2 DIV's, on page load the first DIV is visible, on hover it switches to the second DIV (which is initially hidden).

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

Both DIV's are the same height and width and are positioned absolutely within the wrapper.

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

This is what i've got so far, but it's not working properly -

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

Here is a working FIDDLE so you can see what's happening.

有什么建议吗?

推荐答案

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

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

工作演示

Working Demo

这篇关于使用 jQuery 在悬停时交换 DIV 类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！