hover is delayed because of ::after ::before

[marcustisater]

Hello,

I got a simple menu with a triangle above my list menu to make it look good. Right so,
Whenever I hover over the first list item (which has the triangle above it, done with CSS with content) the triangle turns to another color(blue) which I have done with ::before:hover. Problem is that the triangle now turns blue before the list item turns blue. It’s logic becuase it is the ::before:hover effect but how do I make this possible for both of these to turn color at the same time. Since I need the content:” attribute to display my triangle I need to use the ::before or ::after with hover?

Any suggestions

I created a very, very quick codepen just to show my problem… http://codepen.io/anon/pen/DuBpd

Remeber that this is codepen is just to show you how to solve this problem. I have built similar with better styling to my real menu in my drupal site.

Please be nice…lol :-)

[__]

Simplest solution would be to put the first class on the li, instead of on the a.

http://codepen.io/adrian-enspired/pen/xCbrz

If that’s not practical, I would position the a to take up the full width and height of the li (so both hover states are triggered at the same time).

Please be nice…lol :-)

“nice”? “nice”??!? : p

Seriously, I hope you weren’t really worried.
If so, we’re giving the wrong impression around here.

[Author]

Posts