0

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

1 に答える 1

0

あなたの場合、隣接する兄弟セレクターまたは一般的な兄弟セレクターを使用できます。

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

また

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

どちらも機能します。

それ以外の場合は、HTMLを変更するかJavaScriptを使用することを検討する必要があります。

于 2013-03-10T11:44:20.540 に答える