I am trying to finish (rewrite) a running transition in pure css. The css code that is trying to overwrite does not work; this is not just ignored, and I cannot explain the behavior.
Below is sample code with three links followed by 1 div . After that, 3 more div are added for testing.
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>
When you hover over the link, only the first line of the div changes due to the + selector.
Transition delay holds this guidance for 1 second.
The problem is that when a new tip occurs, I want all the hangs on all subsequent boxes to end. Think of it as a menu; when hovering a new menopection, I want all the other submenus to close, and only the current one to open.
- Hope was on the
~ selector to make all the following div back to normal width, and then a:hover + div can expand the width only to the right. But that does not work.
Text coloring color: red added for testing. Because after some testing, I found out that the problem is not in the ~ selector, but in the css code, but rather in the transition. Removing all transition lines and the result exactly as expected, just without delay. You can see the results here:
Without transitional code lines, all of the following div receive red text - also three additional ones at the bottom. But with cross-code lines, they are not painted red - in fact, only the hovering color is painted red, which means that the codes are not completely ignored, but no longer work as a ~ selector.
The conclusion is that transitions interfere. I, apparently, cannot stop the running transition, and the interfering piece of code behaves unexpectedly and is not ignored.
What exactly is the behavior of the code lines of jumps causing this?
For the curious, I can say that in fact in the project I'm working on the original width before hovering to 0. This solution will work:
a:hover ~ div { display:none; }
Instead of trying to reset the width, I delete the width, and all this is good. I rather ask the above question to understand what the problem is.