Css 叠加div在镀铬和FF中工作，但在IE中不工作？

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

HTML:

JSFIDDLE：

正如你所看到的，它在Chrome和FF中工作得很好，但我无法让它在IE中工作，因为某些原因。请注意，如果删除图像，它会工作，但它不会与那里的图像一起工作

---

问题出在哪里？我该如何解决？

我认为这是某种古老的IE错误，但是如果没有为

.left

元素设置背景色，它将无法识别

。left:hover

条件。尝试将透明默认颜色添加到

.left

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

---

EDIT:Working fiddle，

我认为这是某种古老的IE bug，但是如果您没有为

.left

元素设置背景色，它将无法识别

。left:hover

条件。尝试将透明默认颜色添加到

.left

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

---

编辑：工作小提琴，

尝试此格式

背景：rgba（2482482482480）url（“http://imageshack.com/a/img823/9885/bsux.png）左中心不重复

还有哪些IE不起作用？@mdesdev That'不幸的是，这没有什么区别。我正在运行IE 10Ok…第一次从

.container

中删除z-index并添加

.container img{位置：相对；z-index:100；}

第二次添加

边框：1px实心透明

到

。左

和

。右

和第三个而不是

rgba（248248248,0）

您可以使用

透明

。这应该可以解决一点问题，它在IE中仍然不是很好，但是可以工作。请尝试以下格式

background:rgba（248，248，248，0）url（“http://imageshack.com/a/img823/9885/bsux.png）左中心不重复

还有哪些IE不起作用？@mdesdev That'不幸的是，这没有什么区别。我正在运行IE 10Ok…第一次从

.container

中删除z-index并添加

.container img{位置：相对；z-index:100；}

第二次添加

边框：1px实心透明

到

。左

和

。右

和第三个而不是

rgba（248248248,0）

您可以使用

透明

。这应该可以解决一点问题，它在IE中仍然不是很好，但是可以工作。

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