javascript - 选择子元素(输入字段)时更改父 div 的 CSS

Question

当选择子输入文本字段或鼠标移到容器中的任何其他元素上时，我希望更改父 div 的类。我试过同时使用 jQuery 和 CSS 中的一些伪类，但都无济于事。

Javascript:

$("input").focus(function () {
     $(this).parent().parent("div").css('background-color','#666');  
});

HTML:

    <div class="container_to_change">
            <div class="box1">
                &nbsp;
            </div>
            <div class="box2">
                <input type="text" class="data-entry">
            </div>
            <div class="box3">
                &nbsp;
            </div>
    </div>

Answer 1

正如@Ibu 建议的那样，在他对问题的评论中，您可以简单地使用 :hover 伪类来实现 container_to_change 元素的更改(取决于您希望应用什么更改):

.container_to_change:hover {
    background-color: #ffa;
}

JS Fiddle demo

但是，如果您真的想为此使用 jQuery:

$('.container_to_change').hover(
    function(){
        $(this).addClass('newClassName');
    },
    function(){
        $(this).removeClass('newClassName');
    });

JS Fiddle demo .

---

编辑 以回应来自 wishIdidntsquishthatfish 的评论中的问题:

How do you keep the different state though when the user is interacting with the input element inside?

$('.container_to_change').hover(
    function(){
        $(this).addClass('newClassName');
    },
    function(){
        if ($(this).find('input').is(':focus')){
            return false; // if the input has focus, prevent the removal of the class-name.
        }
        $(this).removeClass('newClassName');
    }).find('input').focus(
    function(){
        // ensures that the class-name is added in response to keyboard-navigation focus
        $(this).closest('.container_to_change').addClass('newClassName');
    }).blur(
    function(){
        // ensures that the class-name is removed in response to keyboard-navigation focus
        $(this).closest('.container_to_change').removeClass('newClassName');
    });

JS Fiddle demo .

引用资料:

• > :hover pseudo-class .
• > hover() .
• > addClass() .
• > removeClass() .
• > :focus .
• > focus() .
• > blur() .