使用jQuery悬停DIV类 [英] Swap DIV class on hover with jQuery

问题描述

这是我想要实现的：

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

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

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

JS：

<$ p $ （）函数（$）{
$（。wrap）。hover（function（）{
$（。first，.second，this）.toggle （）;
}）
}）（jQuery）;

CSS：

  .wrap {position：relative;} 
 
 .first {
 position：absolute; 
 top：0; 
 padding：20px; 
 width：80px; 
 height：80px; 
背景：绿色; 
颜色：白色; 
 display：block; 
} 
 
 .second {
 position：absolute; 
 top：0; 
 padding：20px; 
 width：80px; 
 height：80px; 
背景：黄色; 
颜色：蓝色; 
 display：block; 
可见性：隐藏; 
} 
  

HTML：

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

这是一个可以工作的

有什么建议吗？

>解决方案

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

  .second {
 position：absolute; 
 top：0; 
 padding：20px; 
 width：80px; 
 height：80px; 
背景：黄色; 
颜色：蓝色; 
 display：none; 
} 
  

工作 演示

This is what I'm trying to achieve :

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

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>

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

Any suggestions?

解决方案

Dont Use visibility:hidden, instead use display:none

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

Working Demo

这篇关于使用jQuery悬停DIV类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！