jQuery的CSS樣式，當孩子專注

我有這樣的腳本父DIV：（但它不工作），我想改變box-shadowjQuery的CSS樣式，當孩子專注

$('div#selectbox select:focus').parent().css('box-shadow','0 0 4px 1px #5099E2');

當用戶集中在一個select這是父div#selectboxdiv有什麼建議嗎？

下面是我在做什麼的jsfiddle ... http://jsfiddle.net/2BydK/

來源

2011-12-25 henryaaron

請添加一些HTML標記和CSS背景。 – 2011-12-25 04:13:53

我可能是錯的，但是box-shadow沒有得到廣泛的支持，有些瀏覽器需要某些屬性的前綴，比如'-o-box-shadow'，'-moz-box-shadow'等。 – Nazariy 2011-12-25 04:19:27

提到它的確切原因沒有工作。你面臨着什麼問題。 – Lion 2011-12-25 04:20:23

好像代碼將做尋找集中選擇元素的一個很好的工作，但沒有什麼可以觸發它。也許試試這個：

$('div#selectbox select').focus(function(){ 
    $(this).parent().css('box-shadow','0 0 4px 1px #5099E2'); 
}); 

$('div#selectbox select').blur(function(){ 
    $(this).parent().css('box-shadow','none'); 
});

如果你想在裏面增加一個檢查，你總是可以放在一個if($(this).is(":focus")){}以防萬一。希望可以幫助...

來源

2011-12-25 04:19:44

非常感謝你，在這裏你的腳本和原來的小提琴：http://jsfiddle.net/2BydK/1/ – henryaaron 2011-12-25 04:25:07

你應該鏈這些事件，以防止重複選擇相同的元素 – 2011-12-25 04:25:41

試試這個：因爲你想在風格對焦期間被應用到

$('div#selectbox select').focus(function() { 
    $(this).parent().css('box-shadow','0 0 4px 1px #5099E2'); 
});

來源

2011-12-25 04:19:54

你想抓住選擇框的focusevent，然後應用樣式到它的家長。

$('div#selectbox select').focus(function() { 
 
    $(this).parent().css('box-shadow','0 0 4px 1px #5099E2') 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="selectbox" style="margin: 20px; padding:10px;"> 
 
    <select> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    </select> 
 
</div>

來源

2011-12-25 04:21:46 Brombomb

嘗試了jQuery focus()代替

$('div#selectbox select').focus(function() { 
 
    $(this).parent().css('box-shadow','0 0 4px 1px #5099E2'); 
 
});

div { margin: 10px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="selectbox"> 
 
    <select> 
 
    <option>option one</option> 
 
    <option>option two</option> 
 
    </select> 
 
</div>

來源

2011-12-25 04:23:34

現在你可以做到這一點的純CSS因此不需要任何的JavaScript。

新的CSS僞類:focus-within將有助於這樣的情況，並有助於人們使用tabb進行導航時的可訪問性，在使用屏幕閱讀器時很常見。

div#selectbox:focus-within { 
    box-shadow: 0 0 4px 1px #5099E2; 
}

的：對焦內僞類匹配元件，要麼本身匹配：焦點或具有後代，其匹配：焦點。

您可以檢查哪些瀏覽器都支持這個http://caniuse.com/#search=focus-within

來源

2017-08-14 12:50:04

jQuery的CSS樣式，當孩子專注

回答

相關問題