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

在\之前你有一个#slideshow a.next:hover{它可能会搞砸IE解析你的CSS的努力

Answer 2

似乎有一些奇怪的IE问题，这意味着除非您设置了背景属性，否则标签会保留在图像后面，而我现在无法理解为什么......

但是...

你可以通过将你的背景属性从：悬停状态复制到'正常'状态，然后添加一个大的负背景位置来解决这个问题，这样它们就会被有效隐藏，直到它们悬停在上面，例如：

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

这应该有效

IE悬停在链接上不起作用

2 个答案: