Chrome和IE中的CSS圖像懸停問題

我在使用Chrome和IE中的CSS懸停將鼠標懸停在圖像上時顯示隱藏圖像的問題，但在Firefox中正常工作。這裏是我的鏈接：https://www.solarisdutamas.com/fb/Elvieloon/welcome1.phpChrome和IE中的CSS圖像懸停問題

這裏是我的編碼：

<html> 
<head> 
<meta http-equiv="Content-Style-Type" content="text/css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="css-hover.css" /> 
</head> 
<title>Elvie Loon</title> 
<meta content="Professional Makeup Artist and Hair Stylist" name="description"> 
<style type="text/css"> 
.over .pic1 { 
    display:none; 
    visibility:hidden; 
} 
.over:hover .pic1 { 
    display:inline; 
    visibility:visible; 
    position:absolute; 
    top:250px; 
    left:100px; 
    z-index:11; 
} 
</style> 
<body style="margin: 0px; width: 520px;"> 
<img src="landing-page.jpg" usemap ="#fly1map" /> 

<a class="over"> 
    <map name="fly1map"> 
    <area shape="poly" coords="387,339,433,365,416,376,425,395,371,393,391,369,387,339" href=""> 
    </map> 
    <img src="pic-1.png" class="pic1"> 
</a> 
</body> 
</html>

請幫忙，謝謝。相反知名度

來源

2011-09-02 Ivan Kok

試試這個...

#something:hover 
{ 
    opacity:1; //100% opacity 
    filter:alpha(opacity=100); 
} 

#something 
{ 
    opacity:0; //0% opacity 
    filter:alpha(opacity=0); 
}

P.S的語句中兩條線都做同樣的事情，底部的過濾網，只是做它的IE瀏覽器的方式。

來源

2011-09-02 14:31:25

感謝您的及時回覆。我試過你的方法，但同樣的問題仍然存在。其他解決方案？ –

謝謝，只有透明屬性才能工作！ –

問題是，您無法將鼠標懸停在隱藏的元素上（請參閱Why isn't CSS visibility working?）。

兩個想法...

你可以使用的技術與兩個圖像。除了圖像之外，還要創建一個尺寸相同的透明圖像。然後在鼠標懸停上翻轉它們。

<html> 
<head> 
</head> 
<style type="text/css"> 
    .flipimage { border:solid 1px pink; height:65px; width:65px; background-image:url("blank.jpg"); } 
    .flipimage:hover { border:solid 1px pink; height:65px; width:65px; background-image:url("truck.jpg"); } 
</style> 


<body style="margin: 0px; width: 520px;"> 

    <div class="flipimage"></div> 

</body> 
</html>

2.這種方法需要一些額外的標記，但本質上放置一個<div>以上的圖像。當您將鼠標懸停在<div>上時，它會使用z-index移動到圖像下方。

<html> 
<head> 
    <style type="text/css"> 
    .placeholder{ background-color:pink; height:64px; width:64px; position:absolute; z-index:99; } 
    .placeholder:hover { z-index:-1; } 
    .over { position:absolute; z-index:1;} 
    </style> 
</head> 

<body style="margin: 0px; width: 520px;"> 

    <div> 
     <div class="placeholder"></div> 
     <a class="over"><img src="vcard.jpg" class="pic1"></a> 
    </div> 

</body> 
</html>

來源

2011-09-02 15:47:40 jim31415

Chrome和IE8有一個已知的錯誤：hover和z-index在絕對定位元素上。

Chrome: Issue 83533

來源

2013-01-02 06:20:50

Chrome和IE中的CSS圖像懸停問題

回答

相關問題