HTML / CSS：当鼠标悬停在文本上方时，如何更改图像的不透明度？

Question

当使用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>

Answer 1

在您的情况下，可以使用“ 相邻”同级选择器或“ 常规”同级选择器，例如

.apDiv1:hover + .menu1{ opacity: .5;}

要么

.apDiv1:hover ~ .menu1{ opacity: .5;}

他们都会工作。

否则，您应该考虑更改HTML或使用JavaScript。