使用jquery在div标签上添加悬停效果

All I want to do is hide the class "col-a" and show "col-b" using jquery hover method but for some reason jquery is giving me some funky results can some please help.

我想要做的就是隐藏类“col-a”并使用jquery悬停方法显示“col-b”但是由于某种原因，jquery给了我一些时髦的结果可以请一些帮助。

here is the html

这是html

<div class="col-a">One</div>
<div class="col-b">Two</div>
<div class="col-a">One</div>
<div class="col-b">Two</div>

jQuery:

jQuery的：

$(".col-a").hover(function(){
    $(this).hide().next().show(1000)
    }, function(){
    $(".col-b").hide().prev().show(1000);
});

Side note I'm trying to put all the code on here but I can't figure out how so here is a fiddle thanks for the help.

旁注我试图将所有代码放在这里，但我无法弄清楚这是多么的小提琴谢谢你的帮助。

fiddle

小提琴

3 个解决方案

#1

Hi you can use instead of hover() event just the mouseover for col-a and then the mouseout for col-b. Try this:

嗨，您可以使用鼠标悬停而不是hover（）事件进行col-a，然后使用mouseout输出col-b。尝试这个：

$(".col-a").mouseover(function(){
    $(this).hide();
    $(this).next(".col-b").fadeIn('100');
});
$(".col-b").mouseout(function(){
    $(this).hide();
    $(this).prev(".col-a").fadeIn('100');
});

.hide {
    display:none;
}
.col-a {
    height:200px;
    margin:10px;
    float:left;
    width:200px;
    background-color:yellow;
}
.col-b {
    height:200px;
    margin:10px;
    display:none;
    float:left;
    width:200px;
    background-color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-a">One</div>
<div class="col-b">Two</div>
<div class="col-a">One</div>
<div class="col-b">Two</div>

#2

<div class="col-a">One</div>
<div class="col-b">Two</div>  



$(document).ready(function(){
    $(".col-a").hover(
       function(){
                 $(this).hide();
                 $('.col-b').show();
      },
        function(){
                 $(this).show(1000);
                 $('.col-b').hide();
     });
    });

Although you can get your result using mouseover and mouseout on .col-a and .col-b respectively

虽然你可以分别使用鼠标悬停和鼠标输出来获得你的结果.col-a和.col-b

#3

-1

Hi you can use this.

嗨，你可以使用它。

<script>
 $(".col-b").fadeOut("slow)
</Script>

#1