Завершение бегущего перехода при новом зависании в чистом 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 секунду.

Вопрос теперь, что когда новый парения происходит, я хочу все эффекты при наведении курсора мыши на всех следующие коробки для оканчиваются. Подумайте об этом как о меню; при наведении новой менопекции я хочу, чтобы все остальные подменю закрылись, и только текущий, чтобы открыть.

• Надежда была с селектором ~ сделать все следующие 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/