adding a hover effect on a div tag using jquery

Question

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

Why are there 2 divs with the same class next to eachother?

VaMoose
– VaMoose

2015-02-20 19:01:54 +00:00
Commented Feb 20, 2015 at 19:01 — VaMoose
– VaMoose, Commented Feb 20, 2015 at 19:01
Like this jsfiddle.net/21fn2zg6/2?

DaniP
– DaniP

2015-02-20 19:05:19 +00:00
Commented Feb 20, 2015 at 19:05 — DaniP
– DaniP, Commented Feb 20, 2015 at 19:05

DaniP · Accepted Answer · 2015-02-20 19:08:33Z

2

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>

answered Feb 20, 2015 at 19:08

DaniP

38.3k9 gold badges68 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1119742 Over a year ago

Thanks for the answer. Should I just avoid the hover method all together when working with block elements?

DaniP Over a year ago

@user1119742 np glad to help you .... The block elements doesn't mean avoide the hover is just this specific situation, evaluate your actual behavior and wich event you need to trigger. When a is gone there is no more hover and generate the flicked effect so we need just the enter event then appears b and we just need the out.

Rashedul.Rubel · Accepted Answer · 2015-02-20 20:06:31Z

0

<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

edited Feb 20, 2015 at 20:06

answered Feb 20, 2015 at 20:01

Rashedul.Rubel

3,61928 silver badges39 bronze badges

Comments

David Olivares · Accepted Answer · 2015-02-20 19:05:31Z

-1

Hi you can use this.

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

answered Feb 20, 2015 at 19:05

David Olivares

11 bronze badge

1 Comment

Surreal Dreams Over a year ago

It's a good idea to test your code before you post it - I've seen you post erroneous code twice today. You're missing a quote. It also doesn't answer the question.

Collectives™ on Stack Overflow

adding a hover effect on a div tag using jquery

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related