Sass父选择器并悬停？ [英] Sass parent selector and hover?

问题描述

悬停时是否可以触发父母的课程？
我知道可以用jquery完成，但我想做一个纯CSS解决方案。

Is it possible to trigger a parent's class when on hover? I know it can be done with jquery but I want to do a pure css solution.

我的代码：

.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;
        }
    }
}

字段： http://jsfiddle.net/fcKyc/

当我专注于 input 时， .input-group-addon 会有所作为。 输入和图标是输入组的子级。

Looking to have that when I focus on the input, .input-group-addon would do something. input and the icon are children of the input-group.

推荐答案

如果我理解正确，这就是我对您正在描述的DOM交互的解释。

If I understand it right, here is my interpretation of the DOM interaction you're describing.

.parent

• .child1

• .child1

.child2

.child1上的悬停会影响.child2

A hover on .child1 affects .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 （相邻的兄弟姐妹），则可以使用以下内容：

OR, if .input-group-addon is right after input (adjacent sibling), then you could use the following:

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

按照@Martin的建议。

As @Martin suggested.

这篇关于Sass父选择器并悬停？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！