如何處理由CSS懸停

不同的元素，我想通過徘徊，並在同一時間編輯鄰國元素的寬度來操縱元素的寬度。如何處理由CSS懸停

我想我能做到這一點，像這樣：

.sw_2-technik:hover{ 
    width:60%; 
} 

.sw_2-technik:hover .sw_2.emotionen{ 
    width:40%; 
}

而.sw_technik的懸停使得其寬度爲60％和.sw_2-emotionen至40％。但這似乎並不奏效。

我真的需要使用JS類似的東西？

附加信息：

2個容器旁邊的每個人，像這樣

<div class="sw_2-technik"></div><div class="sw_2-emotionen"></div>

因此，我也嘗試過這樣的代碼：

.sw_2-technik:hover + .emotionen{ 
    width:40%; 
}

但沒有按既不工作也不工作。

來源

2017-02-16 Daiaiai

的可能的複製[如何影響其他元素時一個div懸停（http://stackoverflow.com/questions/4502633/how-to-affect-其他元素-時-A-DIV-是-懸停） –

可能是確實。雖然這後交代： .sw_2-TECHNIK：懸停+ .emotionen { 寬度：40％; } 將是正確的答案。但這對我來說都不起作用 – Daiaiai

可能只是在這裏錯了，但對於你的課程不應該是'.sw_2-technik：hover + .sw_2-emotionen {width：40％; }' – Callum

您可以使用〜或+。不同之處在於，+要求元素直接位於被徘徊的元素之後，並且尋找最接近的元素。

.sw_2-technik:hover ~ .sw_2.emotionen { 
    color: blue; 
}

這裏是的jsfiddle：https://jsfiddle.net/ka1yxv8z/

來源

2017-02-17 07:51:17

正確答案是因爲已經回答的similar question一個：

.sw_2-technik:hover{ 
    width:60%; 
} 

.sw_2-technik:hover + .sw_2-emotionen{ 
    width:40%; 
}

來源

2017-02-16 17:33:57 Daiaiai

在回答您的意見，這似乎正如下圖所示爲我工作。

.sw_2-technik, .sw_2-emotionen { 
 
    background: blue; 
 
    padding: 2px; 
 
} 
 

 
.sw_2-technik + .sw_2-emotionen { 
 
    padding: 5px; 
 
    background: red; 
 
}

<div class="sw_2-technik"></div> 
 
<div class="sw_2-emotionen"></div>

來源

2017-02-16 17:33:59

如何處理由CSS懸停

回答

相關問題