Question

I have a problem with a <a> tag on hover function.

<a href='#' onClick='javascript:showPrev();'class='prev'> </a>

The problem is in CSS code. If I set background-color in both a{} and a:hover{} the image will be visible. Otherwise, if there is no background-color or set to none, the image wont show on hover.

Here is my CSS

a.next {
  outline:none;
  position: absolute; 
  text-decoration:none; 
  color:black; 
  z-index: 800; 
  left: 534px;  
  top: 0px; 
  width: 266px; 
  height: 600px; 
  display: inline;
}

a.prev {
  outline:none;
  position: absolute; 
  text-decoration:none; 
  color:black; 
  z-index: 800; 
  left: 0px;  
  float:left; 
  top: 0px;  
  width: 266px; 
  height: 600px; 
  display: inline;
}

#slideshow a.next:hover {   
  outline:none;
  position: absolute; 
  text-decoration:none; 
  color:black; 
  z-index: 800; 
  left: 534px;  
  top: 0px; 
  width: 266px; 
  height: 600px; 
  display: inline; 
  background:url(../images/next.png) 90% 65% no-repeat;
}

#slideshow a.prev:hover {   
  outline:none;
  position: absolute; 
  text-decoration:none;    
  color:black; 
  z-index: 800; 
  left: 0px;  
  float:left; 
  top: 0px;  
  width: 266px; 
  height: 600px; 
  display: inline; 
  background:url(../images/prev.png) 10% 65%  no-repeat;
}

Does anybody know what might be the problem? Thanks in advance.

Answer 1

There does seem to be some weird IE issue that means the a tags remain behind the image unless you set a background property, and I can’t work out why at the moment…

BUT…

You can get around this by copying your background attributes from the :hover states to the ‘normal’ a states, and then adding a large negative background position, so they are effectively hidden until they are hovered over, e.g.:

a.next {
  outline:none;
  position: absolute; 
  text-decoration:none; 
  color:black; 
  z-index: 800; 
  left: 534px;  
  top: 0px; 
  width: 266px; 
  height: 600px; 
  display: inline;

  background:url(../images/next.png) 90% -1000% no-repeat;
}

This should work