Html 为什么CSS悬停函数适用于"；。页脚“；而不是为了“我”；。左“；？请帮帮我汤姆_Html_Css_Hover

Html 为什么CSS悬停函数适用于"；。页脚“；而不是为了“我”；。左“；？请帮帮我汤姆

html css

Html 为什么CSS悬停函数适用于"；。页脚“；而不是为了“我”；。左“；？请帮帮我汤姆,html,css,hover,Html,Css,Hover,为什么CSS悬停函数适用于“.Footer”而不适用于“.Left”？。我看不到或弄不清是什么导致了这个问题。代码有什么问题？非常感谢您的帮助 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"

为什么CSS悬停函数适用于“.Footer”而不适用于“.Left”？。我看不到或弄不清是什么导致了这个问题。代码有什么问题？非常感谢您的帮助

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


.页脚{
不透明度：0.5；
过滤器：alpha（不透明度=50）；/*适用于IE8及更早版本*/
}
.Footer:悬停{
不透明度：1.0；
过滤器：alpha（不透明度=100）；/*适用于IE8及更早版本*/
}
.左{
不透明度：0.5；
过滤器：alpha（不透明度=50）；/*适用于IE8及更早版本*/
}
.左：悬停{
不透明度：1.0；
过滤器：alpha（不透明度=100）；/*适用于IE8及更早版本*/
}
.标题{
背景色：#000；
位置：固定；
高度：60px；
宽度：自动；
顶部：0px；
左：0px；
右：0px；
}
.H1{
位置：相对位置；
高度：40px；
宽度：440px；
左：自动；
右：自动；
顶部：10px；
底部：10px；
右边距：自动；
左边距：自动；
}
.页脚{
位置：固定；
高度：63px；
宽度：178px；
左：15px；
底部：15px；
}
.集装箱{
背景色：#0F0；
位置：相对位置；
高度：2000px；
宽度：1020px；
z指数：-1；
边缘顶部：75px；
右边距：自动；
左边距：自动；
}
.左{
位置：相对位置；
边缘底部：15px；
}
.中心{
位置：相对位置；
边缘底部：15px；
右边距：15px；
左边距：15px；
}
.对{
位置：相对位置；
边缘底部：15px；
}

脚本（不认为相关）


函数MM_swapImgRestore（）{//v3.0
变量i，x，a=document.MM_sr；用于（i=0；a&&i）

无法找出差异或问题的原因。请帮助我，非常感谢任何帮助。谢谢

演示：

尝试用左、中、右类将图像包装在span中，而不是将类直接应用于图像

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

问题是您正在尝试设置容器不透明度，而不是图像。尝试将文本添加到页脚div，它应该会提供效果。因此请改用

.Footer img:hover{}

。
此外，您还可以尝试更新html和css以提高效率，这可能会解决您的问题

将

和

替换为

和

标记。然后，在css中，您可以根据这些标记选择要具有悬停效果的项目

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

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

悬停这些容器的选定元素

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

希望这有助于解决您的问题。

这是因为

z-index:-1；

用于

.container

。将其移除，它将正常工作

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

演示：

元素

在哪里。左

元素在HTML的第6行。向右滚动一点。你在没有JavaScript的情况下尝试过这个吗？DreamWeaver imageswap脚本总是让我感到畏缩，而且很多时候我都看不懂它。它可能正在更改与su中图像标记相关的代码这是一种使

.Left

类不再相关的方法。你可以使用DreamWeaver创建网页，也可以让网页了解正在发生的事情。你可以选择，但必须选择。（好吧，好吧，我有点夸张）顺便说一句，你应该尝试在

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

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