jQuery CSS Стиль родительского div, когда ребенок сфокусирован

Question

У меня есть такой скрипт: (но он не работает)

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

Когда пользователь фокусируется на select, родитель которого равен div#selectbox Я хочу изменить box-shadow из div какие-либо предложения?

Вот jsFiddle из того, что я делаю ... http://jsfiddle.net/2BydK/

Answer 1

попробуйте 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>

Answer 2

Похоже, что код хорошо справится с поиском сфокусированного элемента select, но нет ничего для его запуска. Возможно, попробуйте это:

$('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")){} просто для уверенности. Надеюсь, это поможет ...

Answer 3

попробуйте это:

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

Answer 4

Теперь вы можете делать это на чистом CSS, поэтому JavaScript не нужен.

Новый псевдокласс CSS :focus-within поможет в таких случаях и поможет с доступностью, когда люди используют табуляции для навигации,Распространенный при использовании программ чтения с экрана.

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

---

Псевдокласс: focus-inside соответствует элементам, которые либо соответствуют самим себе: focus, либо имеют потомков, которые соответствуют: focus.

Вы можете проверить, какие браузеры поддерживают это http://caniuse.com/#search=focus-within

Answer 5

, поскольку вы хотите применить стиль к элементу во время фокуса, вы хотите захватить событие focus поля выбора, а затем применить стиль к его родителю.

$('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>