HTML/CSS 鼠标悬停图像隐藏

发布于 2024-12-08 18:02:03 字数 1999 浏览 0 评论 0原文

我有两张图片,一张显示了“家”这个词,另一张显示了“家”,上面有一些箭头指向它……基本上是一个小东西,可以为我的网站增添趣味,作为我学习的一部分。

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

先谢谢大家了:)

I have 2 images, 1 shows the word "home" and another shows "home" with some arrows pointing to it from above.. basically a little thing to spice up my website that im working on as part of my studies.

What would be the easiest way to transition from the blank image to the arrow' image?
without using fancy JavaScript? i don't like javascript and would prefer not to use it.

My 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>

and 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;
}

Thanks in advance guys :)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

红焚 2024-12-15 18:02:03

有很多方法可以做到这一点,但 sprites + css 是最好的。
减少请求数量,无需在悬停时重新加载图像,因此在连接速度较慢的情况下,在加载滚动图像时不会出现 1 秒的黑色区域。

这是流行的概念,您会发现很多关于它的教程,例如 这个

一切都与图像有关:)

There are many ways to do this but sprites + css is the best.
Reduces number of requests, requires no reload of image on hover so on slow connections you won't get that 1 second black area while the roll over image loads.

This is popular concept, you will find plenty of tutorials on it like this one.

Its all about the image :)

硬不硬你别怂 2024-12-15 18:02:03

只需添加此代码片段即可。

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

Simply add this snippet would work.

.menulink:hover { background-img:url('images/arrow1blank.png'); }
.menulink:hover a { display:none; }
心舞飞扬 2024-12-15 18:02:03

试试这个:

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

Try this:

.menulink       img#arrow1popup { display: none;   }
.menulink:hover img#arrow1popup { display: inline; }
.menulink:hover img#arrow1      { display: none;   }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文