css - Sass 父选择器和悬停？

Question

悬停时是否可以触发父类？我知道这可以用 jquery 来完成，但我想做一个纯 css 解决方案。

我的代码:

.navbar-form{
    padding-left: 55px;
    .input-group{
        width: 200px;
        .form-control{
            border-right: none;
            width: 350px;
             &:hover & {
                border-color: blue;
            }
        }
        .input-group-addon{
            background-color: white;
            border-left: none;
        }
    }
}

fiddle :http://jsfiddle.net/fcKyc/

当我专注于 input 时，希望拥有它，.input-group-addon 会做一些事情。 input 和图标是 input-group 的子项。

Answer 1

如果我没有理解错的话，下面是我对您所描述的 DOM 交互的解释。

. parent

• .child1

• .child2

悬停在 .child1 上会影响 .child2

如果是，那么这里:

.form-control {
    ... //your CSS for this
    input {
        //CSS for input
        &:hover ~ .input-group-addon {
            //CSS for .input-group-addon when input is hovered
        }
    }
}

或者，如果 .input-group-addon 就在 input 之后(相邻的同级)，那么您可以使用以下内容:

.form-control {
    ... //your CSS for this
    input {
        //CSS for input
        &:hover + .input-group-addon {
            //CSS for .input-group-addon when input is hovered
        }
    }
}

正如@Martin 所建议的那样。