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样式，当孩子专注

回答

相关问题