Question

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

这是片段

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

.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://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.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>

这是一个小提琴：

fiddle

Answer 1

大家好，您可以使用hover()代替mouseover，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'); });。试试这个：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

Answer 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();
     });
    });

虽然你可以分别在.col-a和.col-b上使用mouseover和mouseout获得你的结果

Answer 3

您好，你可以使用它。

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

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

3 个答案: