CODEWITHSUNDEEP
jquery
user3847937
user3847937

Reputation: 109

hover effect on div using jquery

HTML:

<div id="container">
    <div class="section one"></div>
        <div class="inner"></div>
    <div class="section two"></div>
        <div class="inner"></div>
    <div class="section three"></div>
        <div class="inner"></div>
    <div class="section four"></div>
        <div class="inner"></div>
</div>

Explanation:

On hover each div ( section ) it should hide and the next div( inner ) should display. On mouseleave it show as old. For this I use moseenter and mouseleave events.

Problem

On mouseenter the div blinks (happends the both events together).

Jquery

$(document).ready(function () {
    $(".inner").hide();
    $(".section").mouseenter(function () {
        $(this).hide();
        $(this).next(".inner").show();
    });
    $(".section").mouseleave(function () {
        $(this).show();
        $(this).next(".inner").hide();
    });
});

Please check the fiddle given below for more details

DEMO

Upvotes: 3

Views: 1675

Answers (3)

Hamson
Hamson

Reputation: 11

As the ".section" is hidden, your mouse leaves the .section. This is why it blinks. And as you show a .hidden, you need to fire your event when you leave the .hidden Here is something that may solve your issue: (http://jsfiddle.net/hdehzec0/7/) :

$(document).ready(function () {
    $(".inner").hide();
    $(".section").mouseenter(function () {
        $(this).next(".inner").show();
        $(this).hide();
    });
    $(".inner").mouseleave(function () {
        $(this).hide();
        $(".section").show();
    });
});

Upvotes: 1

Dany Minassian
Dany Minassian

Reputation: 169

Fiddle : http://jsfiddle.net/hdehzec0/16/

When you enter .section it disappears therefore mouseleave function gets triggered. Instead of using .section on mouseleave use .inner since your mouse is 

$(document).ready(function () {
        $(".inner").hide();
        $(".section").mouseenter(function () {
            $(this).hide();
            $(this).next(".inner").show();
        });
        $(".inner").mouseleave(function () {
            $(this).hide();
            $(this).prev(".section").show();
        }); 

});

Upvotes: 1

JF it
JF it

Reputation: 2403

This is happening because of the .hide is also firing the mouse out function..

Here is your updated Fiddle: http://jsfiddle.net/hdehzec0/12/

Consider this structure for your HTML:

<div id="container">
    <div class="section one"><div class="inner"></div></div>

    <div class="section two"><div class="inner"></div></div>

    <div class="section three"><div class="inner"></div></div>

    <div class="section four"><div class="inner"></div></div>

</div>

and your JQuery : 

$(document).ready(function () {
    $(".inner").hide();
    $(".section").hover(
     function () {
        $(this).find(".inner").show();
     }, function() {
        $(this).find(".inner").hide();
    });
});

Upvotes: 4

Related Questions