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

我无法在图像上覆盖两个div。我的目标是制作一个简单的灯箱，当用户将鼠标移动到灯箱的右侧或左侧时，我希望鼠标变成指针并显示左右箭头。这里是我的代码：覆盖div在Chrome和FF中工作，但不是IE？

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中无法使用它。请注意，如果您删除图像，它可以正常工作，但它不适用于那里的图像。

什么问题，我该如何解决？

来源

2013-12-12 Nate

试试这个格式'背景：RGBA（248，248，248，0）网址（“http://imageshack.com/a/img823/9885/bsux .png“）left center no-repeat;'并且哪个IE不起作用？ – mdesdev

@mdesdev不幸的是，这没有什么不同。我正在运行IE 10 – Nate

好的...首先从'.container'中删除z-index并添加'.container img {position：relative; z-index：100; }'第二个添加'边框：1px实体透明;'到'.left'＆'.right'和第三个而不是'rgba（248,248,248,0）'你可以使用'transparent'。这应该解决一些问题，但它仍然不是伟大的，但工作。 – mdesdev

我认为这是某种陈旧的IE错误，但如果您没有为.left元素设置背景颜色，它将无法识别.left:hover条件。尝试添加一个透明的默认颜色.left。

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

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

来源

2013-12-12 23:22:16 WayneDenier

谢谢，它的工作原理！ – Nate

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

回答

相关问题