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鼠标悬停图片隐藏

回答

相关问题