Question

我想取消选择透明图片以选择其背后的元素，而不使用propriety z-index，请帮助我！这里是Jsfiddle example。

谢谢！

Answer 1

你能不能通过改变它的顺序把输入带到前面？

HTML：

<input id="myinput" type="text" name="" value="SELECT ME PLEASE !"/>
<div id="menulogo"><img src="http://www.marcellokabora.com/web/wokomoko/img/menulogo.png"/></div>

CSS：

    #myinput{
    position: absolute;
    top: 130px;
    left: 260px;
    font-size: 20px;
}

JSFiddle：http://jsfiddle.net/bW52t/

否则，使用pointer-events使元素“点击”

HTML：

<div id="menulogo"><img src="http://www.marcellokabora.com/web/wokomoko/img/menulogo.png"/></div>
<input id="myinput" type="text" name="" value="SELECT ME PLEASE !"/>

CSS：

#menulogo,#menulogo  img{
    pointer-events: none;
}
#myinput{
    position: absolute;
    top: 130px;
    left: 260px;
    font-size: 20px;
}

JSFiddle：http://jsfiddle.net/2m4Tx/

Answer 2

如果您有z-index集，我认为没有办法访问透明图像元素重叠的方法。当然你可以编写一个简短的JS来改变图像的z-index值，或者很快就会隐藏它等等。但是如果不编辑这个属性，我认为这是不可能的..

干杯！

Answer 3

这是一个棘手的问题。在尝试设置图像的索引时，即使使用z-index，也会遇到旧版IE浏览器的问题。看起来像IE7这样的浏览器会忽略图像的索引，即使它位于输入框后面（例如）。你最好的办法是将图像设置为css中div的背景图像，并使两个元素都具有绝对位置。

<div style="position:absolute; background: url(images/myimage.jpg) no-repeat"></div>
<div style="position: absolute; left : 15px">
    <input type="text" />
</div>

我可以选择透明图像背后的元素吗？

3 个答案: