0 
<!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>TOM</title>

CSS ホバー機能が「.Left」ではなく「.Footer」で機能するのはなぜですか? 何が問題を引き起こしているのかわかりません。コードの何が問題になっていますか? どんな助けでも大歓迎です！

CSS:

<style type="text/css">
.Footer {
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}
.Footer:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
.Left {
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}
.Left:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
.Header {
    background-color: #000;
    position: fixed;
    height: 60px;
    width: auto;
    top: 0px;
    left: 0px;
    right: 0px;
}
.H1 {
    position: relative;
    height: 40px;
    width: 440px;
    left: auto;
    right: auto;
    top: 10px;
    bottom: 10px;
    margin-right: auto;
    margin-left: auto;
}
.Footer {
    position: fixed;
    height: 63px;
    width: 178px;
    left: 15px;
    bottom: 15px;
}
.Container {
    background-color: #0F0;
    position: relative;
    height: 2000px;
    width: 1020px;
    z-index: -1;
    margin-top: 75px;
    margin-right: auto;
    margin-left: auto;
}
.Left {
    position: relative;
    margin-bottom: 15px;
}
.Center {
    position: relative;
    margin-bottom: 15px;
    margin-right: 15px;
    margin-left: 15px;
}
.Right {
    position: relative;
    margin-bottom: 15px;
}
</style>

SCRIPT (関連性があるとは思わないでください)

<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onload="MM_preloadImages('images/work_on.png','images/sketch_on.png','images/about_on.png')">

HTML:

<div class="Header">
  <div class="H1">
    <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('work','','images/work_on.png',1)">
      <img src="images/work_off.png" name="work" width="120" height="40" border="0" id="work" />
    </a>
    <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sketch','','images/sketch_on.png',1)">
      <img src="images/sketch_off.png" name="sketch" width="200" height="40" border="0" id="sketch" />
    </a>
    <a href="index.html" target="_self" onmouseover="MM_swapImage('about','','images/about_on.png',1)" onmouseout="MM_swapImgRestore()">
      <img src="images/about_off.png" name="about" width="120" height="40" border="0" id="about" />
    </a>
  </div>
</div>

<div class="Container">
  <img src="images/flowers.png" width="330" height="330" class="Left"/>
  <img src="images/flowers.png" width="330" height="330" class="Center" />
  <img src="images/flowers.png" width="330" height="330" class="Right" />
</div>

<div class="Footer">
  <img src="images/tom_logo.png" width="178" height="63" />
</div>

</body>
</html>

違いが何であるか、または何が問題を引き起こしているのかを理解できません。私を助けてください、どんな助けでも大歓迎です.ありがとう.

デモ:フィドル

4

3 に答える 3

0

クラスを画像に直接適用するのではなく、Left、Center、Right のクラスで画像をスパンでラップしてみてください。

<div class="Container">
  <span class="Left"><img src="images/flowers.png" width="330" height="330"/></span>
  <span class="Center"><img src="images/flowers.png" width="330" height="330"/></span>
  <span class="Right"><img src="images/flowers.png" width="330" height="330"/></span>
</div>
于 2013-05-01T04:33:51.267 に答える
0

問題は、画像ではなくコンテナの不透明度を設定しようとしていることです。フッター div にテキストを追加してみてください。効果が得られるはずです。.Footer img:hover{}代わりに使用してください。
また、html と css を更新してもう少し効率的にすることもできます。これにより、問題が解決する場合があります。

<div id="header">and<div id="footer">を<header>and<footer>タグに置き換えます。CSS で、それらのタグに基づいてホバー効果を持たせたい項目を選択できます。

たとえば、ヘッダー タグとフッター タグ全体、またはタイプのすべての要素にカーソルを合わせるには、

header:hover, footer:hover, .container:hover, img:hover{background-color:#f00;}

それらのコンテナの選択した要素をホバーする

header img:hover{border:1px solid #f00;}
footer a:hover{color:#f00;}
.container img:hover{border:4px dotted #0f0;}

これが問題の解決に役立つことを願っています。

于 2013-05-01T04:39:56.243 に答える