选择子元素(输入字段)时更改父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的问题，编辑了：

​

当用户与input元素交互时，如何保持不同的状态？

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

Answer 2

我认为在尝试获取父级的父级时，不需要指定"div“。

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

但是你为什么要关心父母呢？你可以很容易地说：

$('input').focus(function(){
    $('.container_to_change').css('background-color','#666');
});

如果您担心特定的输入类，只需使用：

$('.data-entry').focus(function(){
    $('.container_to_change').css('background-color','#666');
});