当使用 CSS 悬停时,我设法编写了图像不透明度效果,但该图像充当我页面的按钮,并且上面有文本。我也想在文本悬停时更改图像的不透明度,但我不知道该怎么做。顺便说一句,这是我的代码:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Test</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-image:url('img/back.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
margin: 0;
padding: 0;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: -70px;
top: 277px;
bottom: 0px;
}
#apDiv2 {
position:absolute;
width:835px;
height:115px;
z-index:1;
left: 125px;
top: 48px;
color:#CCC;
}
.img {
opacity:0.7;
}
.fntSz{
font-size:100px;
}
.menu1 {
opacity:0.7;
}
.menu1:hover{
opacity:0.5;
}
#apDiv3 {
position:absolute;
width:200px;
height:69px;
z-index:2;
left: 39px;
top: 4px;
}
.adDiv3:Hover{
}
.menufnt{
color:#CCC;
font-size:50px;
}
-->
</style></head>
<body>
<div id="apDiv3"><div class="menufnt">HOME</div></div>
<div id="apDiv1"><img src="img/layerback.jpg" width="1115" height="240" class="img"/>
<div id="apDiv2">
<div class="fntSz">NEW YORK CITY</div>
</div>
</div>
<img src="img/menu1.jpg" width="242" height="85" class = "menu1" />
</body>
</html>