Kết thúc quá trình chuyển đổi đang chạy khi di chuột mới trong css thuần túy

Question

Tôi đang cố kết thúc (ghi đè) một chuyển đổi đang chạy trong css thuần túy. Mã css cố gắng ghi đè không hoạt động; nó không chỉ bị bỏ qua và tôi không thể giải thích được hành vi.

Dưới đây là mã ví dụ có 3 liên kết được theo sau bởi 1 div. 3 thêm div được thêm vào sau đó chỉ để thử nghiệm.

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>

• Tại di chuột vào một liên kết, chỉ là người đầu tiên-sau div được thay đổi trong chiều rộng vì bộ chọn +.

• Độ trễ chuyển tiếp sẽ giữ cho việc di chuột này thêm 1 giây.

Vấn đề bây giờ là khi một di chuột mới xảy ra, tôi muốn tất cả di chuột tác dụng trên tất cả các sau hộp để chấm dứt được. Hãy nghĩ về nó như một thực đơn; khi lơ lửng một menupoint mới, tôi muốn tất cả các menu con khác đóng lại và chỉ có một menu con đang mở.

• Người ta hy vọng với bộ chọn ~ để làm cho tất cả sau div trở về chiều rộng bình thường, và sau đó là a:hover + div có thể mở rộng độ rộng của chỉ một trong những quyền. Nhưng điều này không hiệu quả.

Màu văn bản color: red được thêm vào để thử nghiệm. Bởi vì sau một số thử nghiệm, tôi phát hiện ra rằng vấn đề không phải là bộ chọn ~ cũng như lệnh css, nhưng thay vì chuyển đổi . Loại bỏ tất cả các đường chuyển tiếp và kết quả chính xác như mong đợi, chỉ không có sự chậm trễ. Bạn có thể xem kết quả ở đây:

• Here is a fiddle với mã không làm việc trên, và
• here is a fiddle với sự chuyển đổi mã dòng loại bỏ, mà nó tất cả các công trình (nhưng thiếu sự chậm trễ).

Không có dòng mã chuyển tiếp, tất cả sau div lấy văn bản màu đỏ - cũng là ba dòng bổ sung ở dưới cùng. Nhưng với các mã chuyển tiếp, chúng là không phải là màu đỏ - trên thực tế chỉ có được di chuyển một màu đỏ, có nghĩa là các dòng mã không bị bỏ qua hoàn toàn, nhưng không hoạt động như ~ bộ chọn nữa.

Kết luận là chuyển tiếp can thiệp. Tôi dường như không thể ngừng chuyển đổi đang chạy và đoạn mã cản trở hoạt động không mong muốn và không bị bỏ qua.

Chính xác hành vi của các dòng mã chuyển tiếp gây ra điều này là gì?

---

Đối với những người tò mò tôi có thể nói rằng trong thực tế về dự án tôi đang làm việc trên chiều rộng ban đầu trước khi hover là 0. Vì vậy giải pháp này sẽ làm việc:

a:hover ~ div { 
    display:none; 
} 

Thay vì cố gắng để thiết lập lại chiều rộng, tôi loại bỏ chiều rộng và tất cả đều tốt. Tôi muốn hỏi câu hỏi trên để hiểu, vấn đề là gì.

Answer 1

Bạn đã gần như ở đó, chỉ cần thêm transition: none để bạn a:hover ~ div

https://jsfiddle.net/e3p97ewj/