Question

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

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

Answer 1

如果没有更大的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>标记中，或者更好地添加到单独的文件中！

在细胞表中翻转图像覆盖上一个细胞图像 - 重复表中的图像

1 个答案: