Question

当使用较小的图像进行鼠标悬停时，我正在使用CSS悬停来创建弹出图像。这在Firefox和Chrome中工作正常，但在IE9中，相邻（侧面）图像似乎与弹出图像重叠。

谢谢！

CSS：

.thumbnail{
    position: relative; 
    z-index: 0;
    float: left; 
    clear: both;
    text-decoration: none;
}
.thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    text-decoration: none;
}
.thumbnail span{ 
    position: absolute; 
    background-color: white;
    padding: 0px; 
    left: -1000px; 
    border: 1px ridge gray;
    visibility: hidden; 
    text-decoration: none;
    text-align:center;
}
.bdecor{
    background-color:#CD2626;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-family:Calibri;
    color: white;
    padding-bottom: 1px;    
}

/*CSS for enlarged image*/
.thumbnail span img{ 
    border-width: 0; 
    padding: 0px;
    width: 180px;
    height: 200px;
    text-decoration: none;
}
.thumbnail:hover span{
    visibility: visible; 
    top: 0; 
    left: 0px; /*position where enlarged image should offset horizontally */
    text-decoration: none;
}

Answer 1

您需要将比原始图像高的z-index添加到放大的图像悬停中。请使用以下代码：

.thumbnail:hover span{
    visibility: visible;
    z-index: 100;
    top: 0;
    left: 0px; /*position where enlarged image should offset horizontally */
    text-decoration: none;
}

在评论中看到这个http://jsfiddle.net/Abhatt/UUJNs/8/后，我想补充一下：

当你有一些糟糕的HTML时忽略CSS。您已将<a>置于另一个<a>内，并且您也没有关闭第二个<a>。但是，关闭它是无关紧要的，因为将<a>置于<input>内是无效的。所以你需要改变它。另外，<a>代码中也不能有{{1}}。

一旦你有希望改变这些问题，问题就会得到解决。

IE9相邻图像重叠/出现在弹出图像中

1 个答案: