SCSSでホバリングしたときにcssを兄弟から変更する

Question

要素にカーソルを移動すると、兄弟からCSSを変更したいと思います。 SCSSでこれを行う方法はありますか？

例：私は.twoの背景色を変更するにはどうすればよい.oneに置くと同様https://jsfiddle.net/rqb5ytav/

？

Answer 1

+ CSS selectorを使用してください。 CSS2から入手できます。

.one:hover + .two { 
    background-color:green; 
} 

フィドル：https://jsfiddle.net/rqb5ytav/1/を見てください。

Answer 2

previousElementSiblingプロパティとnextElementSiblingプロパティを使用して、CSSプロパティを取得できます。

var divOneColor = null; 
var divTwoColor = null; 
$(document).on('mouseover', 'div', function(e) { 
    var clName = $(e.target).attr('class') 
if(clName == "one") { 
    divOneColor = $(this).css("background-color"); 
    divTwoColor = $(this.nextElementSibling).css("background-color"); 
    $(".two").css("background-color", divOneColor); 
    $(".one").css("background-color", divTwoColor); 
} 
else if (clName=="two"){ 
    divOneColor = $(this.previousElementSibling).css("background-color"); 
    divTwoColor = $(this).css("background-color"); 
    $(".one").css("background-color", divTwoColor); 
    $(".two").css("background-color", divOneColor); 
} 

}）; フィドルを見てください。 https://jsfiddle.net/7ow38dve/