輸入可從圖像疊加訪問

Question

我有一個input字段using JSColor, color picker。
左側的顏色區域（input文本字段）從充當按鈕的庫中填充。

問題：是否有可能對右（.arrowDiv）圖像區域，這樣我可以點擊它下面的input文本字段？下面意義z-index

的原因是因爲我似乎無法改變圖書館從比input文本字段以外的任何檢測點擊

我不能讓因爲URL的小提琴問題

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

這是不可能點擊後面的另一個元素的元素，但我連着一個小腳本，將火開關閉事件對demo page解釋股利。這是令人失望的圖書館沒有isOpen()方法，所以我不得不存儲我自己的變量。我想我在這個玩具劇本中得到了你要做的。你會想調整一些代碼，因爲div隱藏了input元素的值。

http://jsfiddle.net/jv6b7/

Answer 2

是否有可能在右邊的圖像區域（.arrowDiv），以便 我可以點擊下方的輸入文本字段？

當然肯定。

嘗試設置頂部屬性和left屬性，而不是right

.arrowDiv{ 
    position:absolute; 
    left:0; 
    top:39px; 
    width:80px; 
    height:38px; 
    display:block; 
    z-index:2; 
    background: url("arrow.png") no-repeat scroll -335px 0 #F2F2F2; 
} 

Check Fiddle

CSS股利大小設置爲該圖標的

.input-container { 
    position:relative; 
    border:#999 1px solid; 
    height: 38px; 
    width: 80px; 
} 
.arrowDiv{ 
    position:absolute; 
    left:60px; 
    top:10px; 
    width:16px; 
    height:16px; 
    display:block; 
    z-index:2; 
    background: url(http://i577.photobucket.com/albums/ss218/charles2690/11.png) no-repeat scroll; 
} 

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

個

JS

$('.arrowDiv').click(function() { 
     // code to open the color picker 
}); 

Fiddle