Sass父元素选择器和hover？

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-group-addon会有所作为。 输入框和图标都是输入组的子元素。

- Mohamed El Mahallawy

---

http://jsfiddle.net/fcKyc/ - Mohamed El Mahallawy

您可以[编辑]您的问题以添加信息。如果信息很重要，请不要在评论中添加。 - BoltClock

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

- Richard Shi

---

对于同级组合器，可以使用+（相邻同级组合器）来仅选择紧接在后面的同级元素。更多信息请参见此处（已在SCC2中实现）：http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors。 - Martin Turjak

@Martin 谢谢，我已经在答案中注意到了。 （不确定当有人通过评论向我的答案添加信息时应该遵循什么礼仪，所以如果我应该做其他事情，请告诉我。） - Richard Shi

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用于某些效果触发的方法。

- RaySinlao

---

是的，如果change是navbar的子元素，这个方法非常有效。我想要悬停在change1上并对change2执行某些操作，它们都是navbar的子元素。 - Mohamed El Mahallawy