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懸停功能適用於「.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（不認爲它初步認識）
<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>
想不通有什麼區別或是什麼導致了這個問題。請幫助我，任何幫助非常感謝。謝謝。
演示：Fiddle
哪裏是'.Left'元素 – 2013-05-01 04:26:40
這是對HTML的6號線。向右滾動一下。 – 2013-05-01 04:27:52
你沒有試過這個沒有JavaScript？ DreamWeaver的圖像轉換腳本總是讓我感到畏縮，而且我曾經見過很多次，但是我從來沒有讀過它。它有可能改變與圖片標籤相關的代碼，使'.Left'類不再相關。 – 2013-05-01 04:33:05