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中工作

回答

相關問題