IE 悬停在链接上不起作用答案

【问题标题】：IE hover on link doesn't workIE 悬停在链接上不起作用
【发布时间】：2011-12-03 15:16:31
【问题描述】：

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

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

问题出在 CSS 代码中。如果我在a{} 和a:hover{} 中设置background-color，图像将可见。否则，如果没有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;
}

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

【问题讨论】：

请给我们显示问题的 URL。
closecurly.kodingen.com/bm/… 这是链接，例如，您可以在 chrome 上进行测试，看看它应该是怎样的。然后就是

标签： javascript html css internet-explorer hover

【解决方案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;
}

这应该可以工作

【讨论】：

谢谢老兄。我从来没有想过这种方法。谢谢一百万。

【解决方案2】：

#slideshow a.next:hover{ 之前有一个\，它可能会扰乱 IE 解析 CSS 的工作

【讨论】：

不太可能是问题，因为他提到添加background-color 可以解决问题。（除非他错了，显然）
发帖时打错字了。我现在已经删除了。但它不在实时代码中。