在单元表中覆盖图像覆盖以前的单元格图像 - 重复表格中的图像

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

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

来源

2012-11-08 user1809757

你能发布完整的相关HTML吗？ –

我将它改为包含表格HTML！这有帮助吗？ – user1809757

没有更大的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-08 16:13:38

非常感谢，完美的作品！ – user1809757

很高兴听到！ –

在单元表中覆盖图像覆盖以前的单元格图像 - 重复表格中的图像

回答

相关问题