CSS悬停图片链接无法在IE中工作

请参考http://solarisdutamas.com/fb/KonzeptGarden/sample.php，鼠标移至“Pebbles Wash”并单击图片。它在Chrome和Firefox中工作正常，但链接在IE中不起作用。这里是我的代码：CSS悬停图片链接无法在IE中工作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Konzept Garden</title> 
<style type="text/css"> 
* {margin: 0; padding: 0;} 
#main { 
width: 520px; 
height: 228px; 
background-image: url(stone.jpg); 
background-repeat: no-repeat; 
position: relative; 
margin: 0 auto;} 

#main ul li { 
list-style: none; 
display: inline;} 

#main ul li:hover { 
visibility: visible;} 

#main ul li a { 
position: absolute; 
z-index: 1;} 

#main ul li a:hover { 
z-index: 100;} 

#main ul li img { 
position: absolute; 
top: 300px; 
right: 999em;} 

#submain1 .butt1 a { 
left: 8px; 
top: 80px; 
    width: 90px; 
height: 32px;} 

#main ul .butt1:hover img { 
    left: 8px; 
    top: 80px;} 
</style> 
</head> 
<body style="margin: 0px; width: 520px;"> 
<div id="main"> 
<ul id="submain1"> 
<li class="butt1"><a href="http://konzeptstone.com/p_pebbles.html" target="_blank"></a><img src="p1.png"></li> 
</ul> 
</body> 
</html>

任何任何想法？请帮助，先进的感谢。

来源

2011-10-01 Ivan

如果您使用的是早期版本的IE，则它与:hover有问题。

http://reference.sitepoint.com/css/pseudoclass-hover

来源

2011-10-01 03:16:00

任何想法如何解决这个问题？ – Ivan

我知道这是一个矫枉过正，但是这将确保它的作品甚至I.E. 6：

#submain1 .butt1 a:link, a:active, a:visited { 
    left: 8px; 
    top: 80px; 
    width: 90px; 
    height: 32px; 
    display:block; 
    overflow: hidden; 
}

然后：

<li class="butt1"><a href="http://konzeptstone.com/p_pebbles.html" target="_blank">&nbsp;</a><img src="p1.png"></li>

。

来源

2011-10-01 03:16:21

感谢您的及时回复，但它无法正常工作。 – Ivan

一个选择是使用jQuery，如果你有它安装。就像Jason所说的那样：在IE6及其以下版本中，悬停不适用于锚定以外的其他任何东西。

假设你可以使用jQuery的解决办法是：

$('#main ul li').hover(function(){ 
    $(this).show(); 
});

使用jQuery将在哈弗动态地添加类的另一种选择。

$('#main ul li').hover(function(){ 
    $(this).addClass('hoverState'); 
});

然后是CSS将是：

#main ul li.hoverState { 
visibility: visible;}

来源

2012-03-22 16:33:38

CSS悬停图片链接无法在IE中工作

回答

相关问题