javascript - Mouseenter called multiple times - Stack Overflow

admin管理员组

文章数量:1290990

I'm building a website, and for the about page, I have pictures that I want to fade to 0.5 opacity and then have text fade in on top if them. My issue is that whenever I put my mouse over one of the images, it, and the text on top of it fades in and out multiple times. Here's a link to the section of my code I'm having trouble with. The issue only occurs if you're moving your mouse over the image from outside of the containing div.

My jQuery:

$(document).ready(function() {
$('.fade').mouseenter(function() {
    $(this).fadeTo(150, 0.5);
    $(this).siblings().fadeIn(150);
}).mouseleave(function() {
    $(this).fadeTo(150, 1);
    $(this).siblings().fadeOut(150);
});
});

I've noticed that when I remove the second line of code in both mouseenter and mouseleave that it resolves the issue. I've tried mouseover, hover, stopPropogation, I've looked through all of these:

mouseenter event called twice even after stopPropagation

Mouseover and mouseleave trigger every time I move the mouse inside the given element

JS mouseenter triggered twice

JQuery mouseover function firing multiple times

How to stop toggle event from being fired multiple times on mouseenter/mouseleave?

jquery mouseover event firing twice

Jquery mouseenter() vs mouseover()

and tried everything they suggested but so far nothing has worked for me. Any ideas?

I'm building a website, and for the about page, I have pictures that I want to fade to 0.5 opacity and then have text fade in on top if them. My issue is that whenever I put my mouse over one of the images, it, and the text on top of it fades in and out multiple times. Here's a link to the section of my code I'm having trouble with. The issue only occurs if you're moving your mouse over the image from outside of the containing div.

My jQuery:

$(document).ready(function() {
$('.fade').mouseenter(function() {
    $(this).fadeTo(150, 0.5);
    $(this).siblings().fadeIn(150);
}).mouseleave(function() {
    $(this).fadeTo(150, 1);
    $(this).siblings().fadeOut(150);
});
});

I've noticed that when I remove the second line of code in both mouseenter and mouseleave that it resolves the issue. I've tried mouseover, hover, stopPropogation, I've looked through all of these:

mouseenter event called twice even after stopPropagation

Mouseover and mouseleave trigger every time I move the mouse inside the given element

JS mouseenter triggered twice

JQuery mouseover function firing multiple times

How to stop toggle event from being fired multiple times on mouseenter/mouseleave?

jquery mouseover event firing twice

Jquery mouseenter() vs mouseover()

and tried everything they suggested but so far nothing has worked for me. Any ideas?

• javascript
• jquery
• html
• css

Share Improve this question Follow edited May 23, 2017 at 12:14 CommunityBot 111 silver badge asked Aug 28, 2015 at 21:06 user3586967user3586967

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

What is happening is you are fading in the elements over the image which interferes with the mouseover listener. So when you hover over the image, it begins to fade, but when the elements fade in, then it blocks the cursor from the image and triggers a mouseout event then it repeats once the elements go away.

I think the quickest way to handle this is to give the container of the image the class of fade, that way the siblings don't interfere with the mouseover listener.

You could change the markup to:

<div id="image-wrapper" >
    <ul id="team-members">
        <li class="tile-wrapper fade">
            <div class="tile">
                <img src="http://placehold.it/158x210"/>
                <h3 class="bio bio-header" style="display:none;">Header</h3>
                <p class="bio bio-footer" style="display:none;">Information</p>
            </div>
        </li>
    </ul>
</div>

and the javascript to:

$(document).ready(function() {
    $('.fade').mouseenter(function(ev) {
        $(this).fadeTo(150, 0.5);
        $(this).find('img').siblings().fadeIn(150);
    }).mouseleave(function() {
        $(this).fadeTo(150, 1);
        $(this).find('img').siblings().fadeOut(150);
    });
});

fiddle: https://jsfiddle/oLckb6h3/2/

The problem is the elements positioning, you are trying to overlay the images sibling, which interferes with the hover event on the image. To fix this try calling the hover state on a parent such as the "tile" class, and editing the CSS to position the text over the image using z-index and positioning.

$(document).ready(function() {
    $('.tile').mouseenter(function() {
        $(this).children('img').fadeTo(150, 0.5).siblings().fadeIn(150);
    }).mouseleave(function() {
        $(this).children('img').fadeTo(150, 1).siblings().fadeOut(150);
    });
});

ul {
    list-style-type:none;
}

.bio {
    padding:15px;
}

.bio-header {
    margin-top:-150px;
}

.tile { display: inline-block;}

.tile > img { z-index: 0; position: relative; }

.tile > .bio { z-index: 1; position: relative; }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-wrapper">
    <ul id="team-members">
        <li class="tile-wrapper">
            <div class="tile">
                <img src="http://placehold.it/158x210" class="fade" />
                <h3 class="bio bio-header" style="display:none;">Header</h3>
                <p class="bio bio-footer" style="display:none;">Information</p>
            </div>
        </li>
    </ul>
</div>

本文标签： javascriptMouseenter called multiple timesStack Overflow