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 悬停功能适用于“.Footer”而不适用于“.Left”？我看不到或弄清楚是什么导致了问题。代码有什么问题？任何帮助是极大的赞赏！

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

2

这是因为z-index: -1;for .container。删除它，它会正常工作

.Container {
    background-color: #0F0;
    position: relative;
    height: 2000px;
    width: 1020px;
    margin-top: 75px;
    margin-right: auto;
    margin-left: auto;
}

演示：小提琴

于 2013-05-01T04:42:49.160 回答
0

尝试使用 Left、Center、Right 类将图像包装在 span 中，而不是将类直接应用于图像。

<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 以提高效率，这可能会解决您的问题。

用and标签替换你的<div id="header">and 。然后，在您的 css 中，您可以根据这些标签选择要具有悬停效果的项目。<div id="footer"><header><footer>

例如，悬停整个页眉和页脚标签，或一个类型的所有元素，

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 回答