CODEWITHSUNDEEP
javascripthtmlcss
wharfdale
wharfdale

Reputation: 752

Flickering replacement image

I have added some jQuery in order to display an .png image with just a blue bar across the bottom with some text, but as you hover over it, it flickers alot, can't seem to control it. This is on the 6 images on the homepage, link provided.

I've included the associated html, css, javascript.

live url: 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>

Upvotes: 0

Views: 122

Answers (1)

epascarello
epascarello

Reputation: 207527

It is due to the fact you are adding a layer on top of the image so that causes the mouseleave event to fire. Apply the mouse enter and leave events to the parent element.

Also why are you using tons of ids, use a class

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

Upvotes: 1

Related Questions