gpt4 book ai didi

css - 跨度图像覆盖文本但不覆盖其他图像

转载 作者:可可西里 更新时间:2023-11-01 13:37:28 25 4
gpt4 key购买 nike

我在表格中创建了缩略图和描述字段。缩略图有一个覆盖相邻文本但不覆盖相邻缩略图的跨度图像??? (所有内容都包含在#divSparesItem 中)我尝试按照其他讨论中的建议向 css 添加 z-index 和显示变体,但似乎没有任何方法可以解决问题。谁能帮忙?

HTML:

            <table>
<tr>
<td><a class="thumbnail" href="#thumb"><img src="Design/Spares Image Thumbnail.png" width="80" height="60" alt="Spare I"/><span><img src="Design/Spares Image Large.png" width="320" height="240" alt="Spare I"/><br/>Spare I</span></a><p>CODE: 123ABC<br/>Description: Donec egestas justo ut nulla congue bibendum.<br/><font color="#FF0000">Price</font></p></td>
<td><a class="thumbnail" href="#thumb"><img src="Design/Spares Image Thumbnail.png" width="80" height="60" alt="Spare I"/><span><img src="Design/Spares Image Large.png" width="320" height="240" alt="Spare II"/><br/>Spare II</span></a><p>CODE: 123ABC<br/>Description: Donec egestas justo ut nulla congue bibendum.<br/><font color="#FF0000">Price</font></p></td>
<td><a class="thumbnail" href="#thumb"><img src="Design/Spares Image Thumbnail.png" width="80" height="60" alt="Spare III"/><span><img src="Design/Spares Image Large.png" width="320" height="240" alt="Spare I"/><br/>Spare III</span></a><p>CODE: 123ABC<br/>Description: Donec egestas justo ut nulla congue bibendum.<br/><font color="#FF0000">Price</font></p></td>
</tr>
</table>

CSS:

#divSparesItem {
color:#CCC;
text-align:left;
font-size:0.8em;
float:right;
padding-top:10px;
padding-left:25px;
padding-right:25px;
text-decoration:none;
}

#divSparesItem img {
float:left;
margin-top:2px;
margin-right:15px;
margin-bottom:10px;
border-left:#000;
border-top:#000;
border-right:#999;
border-bottom:#999;
border-width:1px;
border-style:solid;
}

.thumbnail {
position:relative;
z-index:0;
}

.thumbnail span{
position:absolute;
background-color:#333;
padding-top:15px;
padding-left:15px;
padding-right:0px;
padding-bottom:15px;
border-left:#999;
border-top:#999;
border-right:#000;
border-bottom:#000;
border-width:1px;
border-style:solid;
visibility:hidden;
color:#CCC;
text-decoration:none;
}

.thumbnail span img{
border:none;
z-index:100;
}

.thumbnail:hover span{
display:block;
visibility:visible;
background-color:#333;
top:-115px;
left:0;
}

可以看到issue here (单击 Benelli1 选项卡)。任何建议将不胜感激!

最佳答案

所以你要做的是制作两个 stacking contexts这里。第一个是文档根堆栈上下文,其中包含该 table。另一个将由绝对定位的 span 创建,一旦我们给它一个 z-index。一旦我们这样做了,我们需要做的就是确保它位于其他堆栈上下文之上,如下所示:

CSS:

.thumbnail:hover span {
...
z-index: 1;
}

这是一个 JSFiddle这表明它在所有主要浏览器中都能正常显示。我不得不将 css 弄乱一点,以便让 JSFiddle 正确显示 .thumbnail:hover span 选择器。

此外,虽然对 z-index 的概念性理解很简单,但如果您还没有阅读它的工作原理,那么实际将其用于文档中可能会有点挑战.如果 z-index 一直给您带来麻烦,那么我建议您通读我发送给您的链接中的不同页面 if z-index。您很快就会成为专业人士!

关于css - 跨度图像覆盖文本但不覆盖其他图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13119091/

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