Jquery Mouseover Image Overlay

Just wondering how I can get this working 100% correctly. I think I'm nearly there. Basically, I have an image & when I mouseover, I want an overlay (which is a coloured div) t

Solution 1:

The simplest solution is to add a wrapping element for both elements:

<divclass="wrap"><imgsrc="http://mirrorchecker.com/images/rod_160.png"width="160"class="company-image" /><divclass="company-image-overlay"></div></div>

And place the mouseover/mouseout methods to that element instead:

$('.wrap').mouseover(function () {
    $('.company-image-overlay').show();
}).mouseout(function () {
    $('.company-image-overlay').hide();
});

JS Fiddle demo.

Solution 2:

Instead of checking the .company-image element, you're going to want to check the overlay. Try the following.

$('.company-image').on("mouseover", function () {
    $('.company-image-overlay').show();
});

$('.company-image-overlay').on("mouseout", function () {
    $('.company-image-overlay').hide();
});

Solution 3:

If i were you i would use only css. Actually you do not need any kind of functions like show() or hide(). I used an tag for wrapping because some old Internet Explorer versions does know about :hover only on this tag.

You can check the trick here