Question

我在图像上覆盖两个div时遇到了麻烦。我的目标是制作一个简单的灯箱，当用户将鼠标移动到灯箱的右侧或左侧时，我希望鼠标成为指针，并显示左右箭头。这是我的代码：

HTML：

<div class="container">
    <img src="http://dummyimage.com/600x600/000/fff.jpg">
    <div class="left">
    </div>
    <div class="right">
    </div>
</div>

CSS：

.container {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 600px;
        height: 600px;
        margin-top: -300px;
        margin-left: -300px;
        background-color: lightgrey;
        z-index: 10000;
}

.left {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100%;
        cursor: pointer;
        z-index: 10500;
}

.left:hover {
        background: rgba(248, 248, 248, 0) left center no-repeat url("http://imageshack.com/a/img823/9885/bsux.png");
}

.right {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 100%;
        cursor: pointer;
        z-index: 10500;
}

.right:hover {
        background: rgba(248, 248, 248, 0) right center no-repeat url("http://imageshack.com/a/img845/5814/75r3.png");
}

JSFIDDLE：Fiddle

正如您所看到的，它在Chrome和FF中运行良好，但我无法在IE中将其用于某些原因。请注意，如果您删除图像，它会起作用，但它不适用于那里的图像。

问题是什么，如何解决？

Answer 1

我认为这是某种古老的IE错误，但是如果你没有.left元素的背景颜色集，它将无法识别.left:hover条件。尝试将透明默认颜色添加到.left。

background-color: rgba(248, 248, 248, 0);

编辑：工作小提琴，http://jsfiddle.net/fEy9a/9/

覆盖div工作在Chrome和FF但不是IE吗？

1 个答案: