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和图标是输入组的子项。

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建议的那样。

Answer 2

我认为你正在寻找这样的东西：

<style type="text/css">
.navbar {
  background: #000;
  &:hover .change{
    background: #ccc;
  }
}
</style>

<div class="navbar">
  <div class="change">
  </div>
</div>

如果将鼠标悬停在导航栏上方，则.change div将更改颜色。这是我通常使用的，而不是使用jQuery来实现某些效果触发器。

Sass父选择器和悬停？

2 个答案: