当孩子获得焦点时，jQuery CSS 设置父 div 的样式

Question

我有一个像这样的脚本：（但它不起作用）

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

当用户专注于父级为 div#selectbox 的 select 时，我想更改 box- div 的shadow 有什么建议吗？

这是我正在做的 jsFiddle... http://jsfiddle.net/2BydK/

Answer 1

看起来代码可以很好地找到聚焦的选择元素，但没有任何东西可以触发它。也许可以试试这个：

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

尝试使用 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 3

试试这个：

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

Answer 4

因为您希望在焦点期间应用样式，所以您想抓住 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>

Answer 5

您现在可以在纯 CSS 中执行此操作，因此不需要 JavaScript。

新的 CSS 伪类 :focus-within 将有助于解决此类情况，并且当人们使用选项卡进行导航时（在使用屏幕阅读器时很常见），将有助于提高可访问性。

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

---

:focus-within 伪类匹配元素本身
匹配 :focus 或具有匹配 :focus 的后代。

您可以检查哪些浏览器支持此http://caniuse.com/#search=focus-within