javascript - 闪烁的替换图像

Question

我添加了一些 jQuery 以显示底部只有一个蓝色条和一些文本的 .png 图像，但是当您将鼠标悬停在它上面时，它会闪烁很多，似乎无法控制它。这是在主页上的 6 张图片上，提供了链接。

我已经包含了相关的 html、css、javascript。

直播网址:http://bit.ly/Pjp9Fj

html

<div class="product-images">
        <a href="http://coeval.mangdevelopment.co.uk/Uploads/Product-PDF/1-2.pdf" target="_blank">
        <div>
            <img id="main" src="<?php HTTP_HOST ?>/Images/Index-Products/index-product1.jpg" alt="" title="" />
            <img id="overlay" src="<?php HTTP_HOST ?>/Images/thumbnail-overlay.png" alt="" title="" />
            <span id="text">Speed Indicator Displays</span>
        </div></a>
</div>

CSS

#index-products-gallery .opp-angle .product-images div { position: relative; }
#index-products-gallery .opp-angle .product-images #main { width: 222px; height: 160px; }
#index-products-gallery .opp-angle .product-images #overlay { position:absolute; width: 222px; height: 160px; top:0; left:0; display:none; margin-left: 0; }
#index-products-gallery .opp-angle .product-images #text { position:absolute; bottom: -160px; left: 10px; color: #fff; font-weight: bold; font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; font-size: 14px; display:none; z-index: 999; }

JavaScript

<script type="text/javascript">
    $(document).ready(function() {
    $("#main").mouseenter(function() {
               $("#overlay").show();
               $("#text").show();
    });
    $("#main").mouseleave(function() {
               $("#overlay").hide();
               $("#text").hide();
    });
});
</script>

Answer 1

这是因为您在图像顶部添加了一个图层，从而导致触发 mouseleave 事件。将鼠标进入和离开事件应用于父元素。

还有你为什么要使用大量的 id，使用一个类

HTML:

<div class="product-images">
        <a href="http://coeval.mangdevelopment.co.uk/Uploads/Product-PDF/1-2.pdf" target="_blank">
        <div>
            <img class="main" src="<?php HTTP_HOST ?>/Images/Index-Products/index-product1.jpg" alt="" title="" />
            <img class="overlay" src="<?php HTTP_HOST ?>/Images/thumbnail-overlay.png" alt="" title="" />
            <span class="text">Speed Indicator Displays</span>
        </div></a>
</div>

JavaScript:

$(function() {
    $(".main").parent().on("mouseenter", function() {
        $(this).find(".overlay").show();
        $(this).find(".text").show();
    }).on("mouseleave", function() {
        $(this).find(".overlay").hide();
        $(this).find(".text").hide();
    });
});