CODEWITHSUNDEEP
csstransition
Steeven
Steeven

Reputation: 4210

Ending a running transition at new hover in pure css

I am trying to end (overwrite) a running transition in pure css. The css-code that tries to overwrite doesn't work; it isn't just ignored and I can't explain the behaviour.

Below is an example-code with 3 links each followed by 1 div. 3 more div are added afterwards just 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>

The issue is now that when a new hover happens, I wish all hover-effects on all following boxes to terminate. Think of it as a menu; when hovering a new menupoint, I wish all other submenus to close and only the current one to open.

The color: red text-coloring is added for testing. Because after some testing I found out that the issue isn't the ~ selector nor the css-order, but rather the transition. Removing all transition lines and the result is exactly as expected, just without the delays. You can see the results here:

Without transition code-lines all following div get red text - also the three extra ones in the bottom. But with the transitions code-lines, they are not colored red - in fact only the hovered one is coloered red, which means that the code-lines are not entirely ignored, but doesn't work as a ~ selector anymore.

Conclusion is that the transitions interfere. I apparently can't stop a running transition and the interfering chunk of code is behaving unexpectedly and not ignored.

What is exactly the behaviour of the transitions code lines that causes this?

For those curious I can tell that in reality on the project I'm working on the original width before hover is 0. Therefore this solution will work:

a:hover ~ div {
  display:none;
}

Instead of trying to reset the width, I remove the width and all is good. I am rather asking the question above to understand, what the issue is.

Upvotes: 5

Views: 115

Answers (1)

phobia82
phobia82

Reputation: 1257

You were almost there, just add transition: none to your a:hover ~ div

https://jsfiddle.net/e3p97ewj/

Upvotes: 1

Related Questions