CODEWITHSUNDEEP
jqueryhtmlcss
user1119742
user1119742

Reputation: 145

adding a hover effect on a div tag using jquery

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.

here is the snippet

$(".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>

Here is a fiddle:

fiddle

Upvotes: 1

Views: 307

Answers (3)

Rashedul.Rubel
Rashedul.Rubel

Reputation: 3584

<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

Upvotes: 0

DaniP
DaniP

Reputation: 38252

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

$(".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>

Upvotes: 2

David Olivares
David Olivares

Reputation: 1

Hi you can use this.

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

Upvotes: -1

Related Questions