在純css中新懸停時結束運行轉換

Question

我試圖在純css中結束（覆蓋）正在運行的轉換。試圖覆蓋的css代碼不起作用;它不僅被忽略，而且我也無法解釋這種行爲。

下面是一個示例代碼，其中有3個鏈接，每個鏈接後面跟着1 div。之後再添加3個div僅用於測試。

div { 
 
    background-color: white; 
 
    width: 50px; 
 
    transition: all; 
 
    transition-delay: 1s; 
 
} 
 
a:hover ~ div { 
 
    width: 50px; 
 
    color: red; 
 
} 
 
a:hover + div { 
 
    width: 100px; 
 
    transition-delay: 0s; 
 
}

<a>link 1</a> 
 
<div>text 1</div> 
 
<a>link 2</a> 
 
<div>tekst 2</div> 
 
<a>link 3</a> 
 
<div>tekst 3</div> 
 
<div>tekst 4</div> 
 
<div>tekst 5</div> 
 
<div>tekst 6</div>

• 在一個鏈接上懸停，僅第一以下div在寬度改變，因爲+選擇的。

• 轉換延遲使此懸停持續1秒。

現在的問題是，當一個新的懸停發生，我希望下面盒終止所有所有懸停效果是。把它想象成一個菜單;當徘徊一個新的menupoint，我希望所有其他子菜單關閉，只有當前打開。

• 希望是與~選擇，使所有以下div恢復正常寬度，然後a:hover + div可以擴大恰如其分的一個的寬度。但這不起作用。

color: red添加了文字着色用於測試。因爲經過一些測試，我發現問題不是~選擇器也不是css順序，而是轉換。刪除所有轉換線，結果與預期完全相同，只是沒有延遲。你可以看到結果這裏：

• Here is a fiddle上述非工作代碼和
• here is a fiddle與過渡代碼行刪除，它所有的作品（但缺少延遲）。

沒有轉換代碼行以下所有div獲得紅色文本 - 也是在底部的三個額外的。但是與轉變碼線，他們是不紅色 - 實際上只是徘徊一個是coloered紅色，這意味着代碼行也不完全忽略，但作爲一個~不起作用選擇器了。

結論是轉換干擾。我顯然無法阻止正在運行的轉換，並且干擾的代碼塊表現出意外並且不被忽略。

轉換代碼行的原因究竟是什麼？

---

對於那些好奇，我可以告訴大家，在我的原始寬度工作之前懸停是該項目的現實0。因此該解決方案將工作：

a:hover ~ div { 
    display:none; 
} 

而不是試圖重設寬度，我刪除寬度，一切都很好。我只是問上面的問題來理解問題是什麼。

Answer 1

你是幾乎沒有，只需添加transition: none您a:hover ~ div

https://jsfiddle.net/e3p97ewj/