薩斯家長選擇器和懸停？

懸停時是否可以觸發父級的課程？我知道它可以用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和圖標是輸入組的子項。

來源

2014-03-03 Mohamed El Mahallawy

http://jsfiddle.net/fcKyc/ –

您可以編輯您的問題以添加信息。如果它很重要，不要把它放在評論中。 – BoltClock

良好的電話@boltClock –

如果我理解正確，這裏是我對您所描述的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 
     } 
    } 
}

正如@馬丁建議。

來源

2014-03-03 06:08:24

+1 [**同級組合器**]（http://www.w3.org/TR/css3-selectors/#兄弟-組合子）。如果你只想在之後立即使用兄弟，你也可以使用'+（鄰接兄弟組合）。在這裏查看更多（已在SCC2中工作）：[http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors](http://www.w3.org/TR/CSS21/selector。 HTML＃相鄰選擇器） –

@Martin謝謝，我在答案中指出。（不知道當有人通過評論爲我的答案添加信息時，禮儀是什麼，所以請告訴我，如果我應該做其他事情。） –

@shiazure和Martin，效果很棒！感謝你的回答！ –

我認爲你正在尋找的東西是這樣的：

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

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

如果將鼠標懸停在導航欄上方，則.change DIV會改變顏色。這是我通常使用的，而不是使用某些特效觸發器的jQuery。

來源

2014-03-03 05:35:38 RaySinlao

是的，如果改變是導航欄的孩子，這很有效。我正在將鼠標懸停在change1上，並且已經做了一些改變2，它們都是navbar的子項 –

薩斯家長選擇器和懸停？

回答

相關問題