Question

I’m maintaining a legacy site and on this site there is a weird mouseover problem. It does not happens in IE, but it does in Chrome. I tried to see what the problem is, but I can’t find it. It looks like the expand image is also reacting on the mouseover image. This is the url. It happens when you hover over an image and then hoover over the +.

http://www.moviq.nl/zonz-schaduwdoeken-zonnezeilen

Answer 1

The problem at hand here is that when you hover the + sign, the image hover event gets lost, so the browser keeps changing from hover to non-hover status.
This is due to some weird things going on with your code… I would suggest that you make some changes to keep the code more simple and easy to interpret, and of course, also solving your problem:

The script that you have to the onmouseover and onmouseout events:

function endAssetButtons(el) {
  if (!Spif.isIE||!Spif.isIE7) {
    el.parentNode.style.position="";
    el.parentNode.style.overflow="";
  }
}
function startAssetButtons(el,id) {
  if (!Spif.isIE||!Spif.isIE7) {
    el.parentNode.style.position="relative";
    el.parentNode.style.overflow="hidden";
  }
}

is adding and removing some CSS to the image wrapper (div).
This is wrong and should be removed, since the CSS position:relative and the overflow:hidden should always be present to allow the + sign to always be absolutely positioned relatively to the image wrapper div.

So, this css should be available to all browsers all the time:

.contentAsset {
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

content.css (Line 300)

This allows all browsers to deal with the + sign equally and keeping it hidden until the animation gets triggered.

---

Additionally, the css for the + sign should be changed into:

.contentAssetButton {
    text-indent:-9999px;
    height: 15px;
    width: 15px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: -20px;
    display: block;
}

content.css (Line 334)

This allows the + sign to have a more button alike style and be better recognized by all browsers.

At the very least this should point you into the right direction!

Are here it is, the Fiddle Example!