Javascript 闪烁替换图像

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

我已经包括了相关的html、css和javascript

实时网址：

html

javascript

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

$（文档）.ready（函数（）{
$（“#main”）.mouseenter（函数（）{
$（“#覆盖”）.show（）；
$（“#text”）.show（）；
});
$（“#main”）.mouseleave（函数（）{
$（“#覆盖”）.hide（）；
$（“#text”）.hide（）；
});
});

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

还有，为什么要使用大量ID，使用类

HTML:

---

你试过使用

mouseover

和

mouseout

吗？网站在页脚地址上写着“Endinburgh”btw@PedroEstrada现在已经上线了，但没有了。仅供参考：看看你在IE9中的站点，你有布局问题。

#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; }

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

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

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