Css Sass父选择器和鼠标悬停？

悬停时是否可能触发父类？ 我知道可以用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;
        }
    }
}

小提琴：

---

当我专注于

输入

，

.input组插件

时，我希望能够实现这一点<代码>输入和图标是输入组的子项。

我想您正在寻找类似的内容：

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

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

navbar先生{
背景：#000；
&：悬停{
背景：#ccc；
}
}

---

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

如果我理解正确，下面是我对您描述的DOM交互的解释

.家长

• .儿童1

• .儿童2

将鼠标悬停在上。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所建议的那样。

您可以通过提问添加信息。如果它很重要的话，不要把它放在评论里。是的，如果改变是navbar的产物，这很有用。我希望将鼠标悬停在change1上，并对change2做一些事情，change2都是navbar+1的子项。如果您只想立即使用同级组合符，那么也可以使用

+

（相邻同级组合符）。请参阅此处的更多内容（SCC2中已有此功能）：@Martin谢谢，我在回答中注意到了这一点。（不知道有人通过评论向我的答案中添加信息是什么礼节，所以一定要告诉我是否应该做其他事情。）