gpt4 book ai didi

html - 单元格表格中的翻转图像覆盖先前的单元格图像 - 表格中的重复图像

转载 作者:行者123 更新时间:2023-11-28 13:33:24 26 4
gpt4 key购买 nike

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

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

最佳答案

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

要解决这个问题,你必须给每个 diva一个特定的选择器,比如 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>标记,或者在单独的文件中更好!

关于html - 单元格表格中的翻转图像覆盖先前的单元格图像 - 表格中的重复图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13292799/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com