Text underneath link is getting in the way in Internet Explorer

Question

Hello -- I am using the Nivo slideshow (http://nivo.dev7studios.com/) throughout a site i am developing ... it is working great, except that in Internet Explorer the links only work when the mouse is not hovering over the text in the slideshow - in other browsers you can click anywhere in the slideshow (on the image, on the caption, on the headline, etc) ... but in IE for some reason the link does not work when hovering over the text? any ideas? here is the link to the site - most pages have the slideshow on it: http://www.arcaspicio.squarespace.com

Much appreciated!!

Answer 1

It's just a browser quirk which you will have to hack your way around.

Some browsers take over the mouse when it hovers over text or the text is treated as a layer that can't be clicked through (even though it appears transparent) so you will need to do something like this (untested):

$(".nivo-caption").hover(function() {
 $(this).css('cursor','pointer');
 }, function() {
 $(this).css('cursor','auto');
});

$(".nivo-caption").click(function() {
  var url = 'somewhere';
  document.location.href = 'wherever';
});

You will need to play around with selectors etc. and you will also need to do something with the URL i.e. get the URL from the clicked text's parent or sibling etc.