0

我正在尝试在每个表格单元格中制作带有超链接的翻转图像，但由于某种原因，我制作的每个后续单元格都覆盖了它之前的单元格.:。每个单元格成为一个重复的图像。代码在我第一次编写时运行良好；这完全出乎意料。这是两个相邻单元格的图像代码 - 由于某种原因对我来说发生了什么，第二个单元格也一直显示为第一个单元格图像。

<table style="width: 655px; height: 630px; border: 2px dotted black;">
<tbody>
<tr align="center">    
<td style="border: 2px dotted black; width: 220px; height: 210px;"> <style type="text/css">
.rollover a {display: block;
  width: 210px;
  height: 155px;
  background-image: url( IMG1a );}
.rollover a:hover{display: block;
  width:210px;
  height: 155px;
  background-image: url( IMG1b );}
</style><div class="rollover"> <a href="link1"></a></div></td>

<td style="border: 2px dotted black; width: 220px; height: 210px;"> <style type="text/css">
.rollover a {display: block;
  width: 210px;
  height: 155px;
  background-image: url( IMG1a );}
.rollover a:hover{display: block;
  width:210px;
  height: 155px;
  background-image: url( IMG1b );}
</style><div class="rollover"> <a href="link1"></a></div></td></tr></tbody></table>
4

1 回答 1

0

如果没有更大的 HTML 块，我假设您在页面中逐字记录了它。<style>元素不限于页面的一部分。因此，如果页面中有这两个样式元素，最后一个语句将覆盖第一个语句并影响两个 div。

要解决此问题，您必须提供每个div或a特定的选择器，例如id：

<style type="text/css">
#first-div.rollover a {display: block;
  width: 210px;
  height: 155px;
  background-image: url( IMG1a );}
#first-div.rollover a:hover{
  background-image: url( IMG1b );}

#second-div.rollover a {display: block;
  width: 185px;
  height: 131px;
  background-image: url( IMG2a );}
#second-div.rollover a:hover{
  background-image: url( IMGb );}
</style>

<div class="rollover" id="first-div">
  <a href="link1"></a>
</div>
<div class="rollover" id="second-div">
  <a href="link2"></a>
</div>

和往常一样，将您的标签包含<style>在您的<head>标签中，甚至更好地包含在单独的文件中！

于 2012-11-08T16:13:38.293 回答