Question

.thumbnail:hover
{
    background-color: transparent;  
    z-index: 1;
}

我已指定此样式以使图像在鼠标悬停时与另一个图像重叠。它在除IE8之外的所有其他浏览器中都能很好地工作。我尝试为z-index指定更高的值，但它没有用完！

这是与缩略图相关的完整样式

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

.thumbnail:hover {
    background-color: transparent;
    z-index: 50;
}

.thumbnail span {
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    right: -500px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
}

.thumbnail span img {
    border-width: 0;
    padding: 2px;
    width: 400px;
    height: 300px;
}

.thumbnail:hover span {
    visibility: visible;
    top: 0;
    right: -290px;
    vertical-align: top;}
 The HTML part for the CSS is mentioned below : <a id="aPhotos" href="SubscribersPropertyDetail.aspx" class="thumbnail" runat="server"> <img id="imgPhotos" border="0" height='130' width='150' title='Click to view full details about this property' runat="server" /> <span id="spanZoom" runat="server"> <img id="imgzoomphotos" src='~/images/PropertyImages/NoImage.jpg' runat="server" /></span> </a>

Answer 1

您是否在另一个position选择器中设置了.thumbnail属性？

.thumbnail:hover {
    background-color: transparent;
    position: relative;
    z-index: 2;
}

Answer 2

如果没有所有代码（或至少更多代码），这很难评估。通常，要使IE工作，您应该将元素位置设置为相对或绝对。此外，父元素应设置为position：relative; z-index：1。如果这不起作用，请发布更多信息。谢谢！

修改

啊，我现在明白了。你需要在。悬停时出现的.thumbnail孩子的跨度。有些浏览器会根据元素的顺序来允许这种情况。确保其有效

.thumbnail { position: relative; z-index: 1; } .thumbnail:hover { background-color: transparent; } .thumbnail span { position: absolute; background-color: lightyellow; padding: 5px; right: -500px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; z-index: 50; }

Answer 3

我将z-index属性添加到缩略图：hover span style的值高于缩略图样式的值。这解决了!! .thumbnail：悬停跨度{/ 用于悬停时放大图像的CSS / 能见度：可见; 上：-140px; / *放大图像应水平偏移的位置* / 左：-500px; z-index：51; }

z-index属性不会导致IE8重叠

3 个答案: