0

背景调查： 1. 刚接触基本的 html 和 css。2. 不允许使用 Javascript。3. 搜索了网站，没有找到匹配的主题（或无法理解）。4. z-index和hover的模糊知识。5.离线页面。使用谷歌浏览器查看页面。使用记事本编辑。

我想要什么： 我需要将 5 张图像按水平顺序堆叠在一起。例如，在这段代码中，我希望 5 个国家标志（所有链接，大小相等，使用“left: px;”区分）在悬停时以 0.99999 链接不透明度和 1.0 不透明度的顺序相互重叠。当没有悬停时，图像应该回到它们原来的方式，而不是改变原始索引。

由于知识限制，宁愿修改此代码而不是完全不同的替代方案。

我所做的： 为每个图像使用 div 并为每个 div 及其各自的悬停创建 css [在为每个 img 创建 css 失败（保留 z-index 问题）之后]。现在这样做之后，悬停也不起作用。

问题： 1.悬停/不透明度不起作用。2. 悬停后z-index不保留。

PS 对这里的业余工作和问题表示歉意。

<html>
<head>
 <title>
  Europe: A never ending journey
 </title>
<style type="text/css">
div.mainRunner
  {
  position: absolute;
  }
div.transbox1
  {
   position: absolute;
   z-index: 1;
   top: 0px;
   left: 0px;
   opacity:0.99999;

  }
div.transbox1:hover
  {
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  opacity:1.0;
  }

div.transbox2
  {
   position: absolute;
   z-index: 2;
   top: 0px;
   left: 80px;
   opacity:0.99999;

  }
div.transbox2:hover
  {
   position: absolute;
   z-index: 2;
   top: 0px;
   left: 80px;
   opacity:1.0;
  }
div.transbox3
  {
   position: absolute;
   z-index: 3;
   top: 0px;
   left: 160px;
   opacity:0.99999;

  }
div.transbox3:hover
  {
   position: absolute;
   z-index: 3;
   top: 0px;
   left: 160px;
   opacity:1.0;
  }
div.transbox4
  {
   position: absolute;
   z-index: 4;
   top: 0px;
   left: 240px;
   opacity:0.99999;

  }
div.transbox4:hover
  {
   position: absolute;
   z-index: 4;
   top: 0px;
   left: 240px;
   opacity:1.0;
  }
div.transbox5
  {
   position: absolute;
   z-index: 5;
   top: 0px;
   left: 320px;
   opacity:0.99999;

  }
div.transbox5:hover
  {
   position: absolute;
   z-index: 5;
   top: 0px;
   left: 320px;
   opacity:1.0;
  }

</style>
</head>
<body leftmargin="0px" topmargin="0px" marginwidth="0px" marginheight="0px">
 <div class="mainRunner">
  <div class="transbox1">
   <a href="Italy.html"><img src="Italy.jpg" width="800" height="450"></a>
  </div>
 <div class="transbox2">
   <a href="France.html"><img src="France.jpg" width="800" height="450"></a>
 </div>
 <div class="transbox3">
  <a href="Germany.html"><img src="Germany.jpg" width="800" height="450"></a>
 </div>
 <div class="transbox4">
  <a href="Switzerland.html"><img src="Switzerland.jpg" width="800" height="450"></a>
 </div>
 <div class="transbox5">
  <a href="UnitedKingdom.html"><img src="United Kingdom.jpg" width="800" height="450"></a>
 </div>
 </div>
</body>
</html>
4

1 回答 1

2

将其发布为答案，因为它是答案（我正在尝试积累一些代表 =）：

将处于 :hover 状态的元素的 z-index 设置为大于您希望它显示在前面的元素的 z-index。

于 2012-07-25T23:23:37.383 回答