Question

我有2个图像，1个显示“家”这个词，另一个显示“家”，其中一些箭头从上面指向它...基本上是一个小东西来加强我的网站，我作为我的学习的一部分工作。

从空白图像过渡到箭头图像的最简单方法是什么？没有使用花哨的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;
}

先谢谢你们：）

Answer 1

有很多方法可以做到这一点，但精灵+ css是最好的。减少请求数量，不需要在悬停时重新加载图像，因此在慢速连接时，当翻转图像加载时，您将无法获得1秒黑色区域。

这是一个流行的概念，你会发现很多关于它的教程，如this one。

关于图像的全部内容：）

Answer 2

只需添加此代码段即可。

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

Answer 3

试试这个：

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

HTML / CSS鼠标悬停图像隐藏

3 个答案: