HTML/CSS鼠標懸停圖片隱藏

我有2個圖像，1顯示單詞「家」，另一個顯示「家」與一些箭頭指向它從上面..基本上是一點點東西，以調動我的網站，即時工作作爲我學習的一部分。HTML/CSS鼠標懸停圖片隱藏

什麼是從空白圖像過渡到箭頭圖像的最簡單方法？沒有使用花哨的JavaScript？我不喜歡JavaScript，並且不喜歡使用它。

我的HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<link rel="stylesheet" type="text/css" href="styles/styles.css" /> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>This is my website :D</title> 
</head> 
<body> 
    <div id="banner"><img id="logo" src="images/logo.png" /> 
     <div id="menucontainer"> 
      <div class="menulink" id="menu1"><a href="index.html"><img border="0" id="arrow1" src="images/arrow1blank.png" /><img border="0" id="arrow1popup" src="images/arrow1.png" /></a></div> 
      <div class="menulink" id="menu2"><a href="#">About Us</a></div> 
      <div class="menulink" id="menu3"><a href="#">Services</a></div> 
      <div class="menulink" id="menu4"><a href="#">Account</a></div> 
     </div> 
    </div> 
</body> 
</html>

和CSS：

#banner { 
    background-color:#000000; 
    height:100px; 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
} 
#logo { 
    position:absolute; 
    left:350px; 
} 
#menucontainer { 
    position:relative; 
    left:750px; 
    top:0px; 
    right:350px; 
    height:100px; 
} 
#menu1 { 
    float:left; 
    text-align:center; 
    width:120px; 
    height:100px; 
} 
#menu2 { 
    float:left; 
    width:120px; 
    text-align:center; 
    height:100px; 
} 
#menu3 { 
    float:left; 
    text-align:center; 
    width:120px; 
    height:100px; 
} 
#menu4 { 
    float:left; 
    width:120px; 
    text-align:center; 
    height:100px; 
}

在此先感謝球員:)

來源

2011-10-07 Gobble45

只需添加這個片段會工作。

.menulink:hover { background-img:url('images/arrow1blank.png'); } 
.menulink:hover a { display:none; }

來源

2011-10-07 04:19:35 InspiredJW

我想這一點，但它不隱藏原始圖像... 我應該使用什麼來隱藏他們開始用？所以我沒有2個圖像佔用空間.. – Gobble45

然後你必須把顯示器：沒有原始圖像在盤旋，也 – InspiredJW

有很多方法可以做到這一點，但sprites + css是最好的。減少請求數量，不需要在懸停時重新加載圖像，所以在慢速連接時，您不會在滾動圖像加載時獲得1秒的黑色區域。

這是流行的概念，你會發現很多教程，如this one。

它的所有圖像:)

來源

2011-10-07 04:20:33

同意。您可以使用像http://spritegen.website-performance.org/這樣的資源爲您生成圖像+ CSS代碼。 – qbantek

我寧願不生成代碼，因爲這是作弊 - 。 - – Gobble45

http://jsfiddle.net/DCrrm/4/ ..我希望你不要太冒犯：我用了2個發電機的http：// cooltext.com/爲圖像和http://spritegen.website-performance.org/生成精靈..該CSS是所有人生成..我認爲:) – qbantek

試試這個：

.menulink  img#arrow1popup { display: none; } 
.menulink:hover img#arrow1popup { display: inline; } 
.menulink:hover img#arrow1  { display: none; }

來源

2011-10-07 04:54:51

等一下，沒關係！工作..我已經改變了ID的arrow1popup爲arrow1，箭頭1爲arrow1blank – Gobble45

HTML/CSS鼠標懸停圖片隱藏

回答

相關問題