我无法在图像上叠加两个 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 中运行它。请注意,如果您删除图像,它可以工作,但它不会与那里的图像一起工作。
问题是什么,我该如何解决?
最佳答案
我认为这是某种古老的 IE 错误,但如果您没有为 .left
元素设置背景颜色,它将无法识别 .left:hover
条件。尝试向 .left
添加透明的默认颜色。
background-color: rgba(248, 248, 248, 0);
编辑:工作 fiddle ,http://jsfiddle.net/fEy9a/9/
关于css - 覆盖 div 在 Chrome 和 FF 中有效,但在 IE 中无效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20555798/