Question

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

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

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

闪烁的替换图像

1 个答案: