JQuery mouseover image overlay

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

<div class="wrap">
    <img src="http://mirrorchecker.com/images/rod_160.png" width="160" class="company-image" />
    <div class="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.