我的图片在前面,文字在后面。我想选择后面的文字。 这适用于 chrome 和 firefox。我如何让它在 IE 中也能正常工作。
<div id="parent-street-view">
<div id="map_canvas">This is supposed to be visible and selectable</div>
<img class="overlay-pollution"
src="http://www.lorempixel.com/400/400" />
</div>
<style>
@media print {
.gmnoprint {
display: none;
}
}
@media screen {
.gmnoscreen {
display: none;
}
}
#parent-street-view {
position: relative;
}
#map_canvas {
position: absolute !important;
width: 500px;
height: 400px;
background-color: rgb(229, 227, 223);
overflow: hidden;
-webkit-transform: translateZ(0);
z-index: 0;
}
#parent-street-view .overlay-pollution {
width: 500px;
height: 400px;
position: absolute;
z-index: 100;
opacity: 0.5;
pointer-events:none;
}
</style>
http://jsfiddle.net/G5BeU/2/ 我如何在 IE 中使用它?
最佳答案
1) - #map_canvas 的 z-index 值为 0,图像 .overlay-pollution 的 z-index 值为 100,问题是图像实际上位于文本上方,这就是原因IE 不允许选择文本,要解决这个问题,请给 #map_canvas 更高的值,比如给 #map_canvas - z-index: 101。这将解决第一个问题。
2) - 当您给#map_canvas 一个更高的值时,#map_canvas 的背景颜色将填充 block 并且图像不会出现,因此只需为#map_canvas 背景颜色提供不透明度 - background-color: rgb (229, 227, 223, 0.5);
希望这能解决 IE 问题。
关于javascript - 如何使指针事件在 IE 中工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13667285/