...">
Clever Geek Handbook

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

When hovering over each div (section), it should hide and the next div (inner) should be shown. On a mousetrap, it looks like an old one. For this, I use the moseenter and mouseleave events.

Problem

In the center of the mouse, the div is blinking (both events occur 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 see the below script

DEMO

+3


source to share


3 answers


This is because it .hide

also triggers the function mouse out

.

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


source


As the ".section" is hidden, your mouse leaves the .section. This is why it blinks. And when you show .hidden

you need to fire your event when you leave .hidden

Here is what might solve your problem: ( 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();
    });
});
+1


source


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

When you enter the .section it disappears, so the mouseleave function is triggered. Instead of using .section on mouseleave, use .inner as your mouse

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

});
+1


source






More articles:


All Articles