javascript - 可从图像叠加层访问输入

Question

我有一个输入字段using JSColor, color picker .
左侧的颜色区域(输入 文本字段)从充当按钮的库中填充。

问题:是否可以将图像区域放在右侧(.arrowDiv)，以便我可以单击输入文本它下面的场？下面的意思是z-index

原因是因为我似乎无法更改库来检测除输入文本字段之外的任何内容的点击

由于网址问题，我无法 fiddle

CSS:

.input-container {
    position:relative; border:#999 1px solid; 
    height: 38px; width: 80px;
}
.arrowDiv{ 
    position:absolute; right:0; width:38px; height:38px; display:block; z-index:2;
    background: url("arrow.png") no-repeat scroll -335px 0 #F2F2F2;
}

.input-container input{
    float:left; margin:0; padding:0;
    width:75px; height:38px; 
    border:none;  background:transparent;   cursor:pointer;
}

html:

<div class="input-container">
    <input class="color">
    <div class="arrowDiv"></div>
</div>

Answer 1

不可能单击另一个元素后面的元素，但我在 div 上附加了一个小脚本，它将触发 demo page 中解释的打开关闭事件。 。令人失望的是，该库没有 isOpen() 方法，因此我必须存储自己的变量。我想我在这个玩具脚本中得到了你想要的东西。不过，您需要对代码进行一些调整，因为 div 隐藏了输入元素的值。

http://jsfiddle.net/jv6b7/