javascript - IE 悬停在链接上不起作用

Question

我对 <a> 有疑问悬停功能上的标签。

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

问题出在 CSS 代码中。如果我设置 background-color在两个a{}和 a:hover{}图像将可见。否则，如果没有 background-color或设置为 none ，图像不会在悬停时显示。

这是我的 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;
}

有人知道可能是什么问题吗？提前致谢。

Answer 1

似乎确实存在一些奇怪的 IE 问题，这意味着 a 标签保留在图像后面，除非您设置背景属性，我目前无法弄清楚为什么...

但是...

您可以通过将背景属性从 :hover 状态复制到“正常”a 状态，然后添加一个大的负背景位置来解决这个问题，这样它们就可以有效地隐藏起来，直到它们悬停在上面，例如:

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

这应该可行