Question

我有一个这样的脚本:(但它没有用）

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

当用户关注的select父母是div#selectbox时，我想更改box-shadow任何建议的div吗？

这是我正在做的事情...... 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 event，然后将样式应用于其父级。

$('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可以帮助解决这类问题，并在人们使用Tab键进行导航时提供可访问性，在使用屏幕阅读器时很常见。

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

：focus-within伪类匹配自身的元素匹配：焦点或具有匹配的后代：焦点。

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

jQuery CSS在孩子聚焦时设置父div

5 个答案: