CODEWITHSUNDEEP
csscss-selectorspseudo-element
Cameron
Cameron

Reputation: 28783

CSS not selector with after content

Is it possible to use the :not() selector/pseudo thing with :after?

So for example if I have the following:

li:hover > ul
{
    display: block;
}

li:after
{
    content: " ";
    width: 200px;
    height: 200px;
    background: #cccccc;
    position: absolute;
    top: -100px;
    left: -100px;
}

What happens is that if a person HOVERS over the content that is created by the after it will also make the child menu display block. In other words hovering other the LI or the AFTER content is acknowledged as hovering the LI. How would I stop this, so it only does the display block when hovering the ACTUAL LI and NOT the content created using AFTER.

I thought about: li:hover:not(:after) > ul { display: none; } but hasn't worked...

Also tried: li:after:hover > ul but also didn't work.

Any ideas for this? It might seem trivial but it's causes some issues in my design so need to stop it doing it asap.

Upvotes: 0

Views: 1609

Answers (2)

Kumori
Kumori

Reputation: 11

Actualiy it is possible with the use of the attribute "pointer-events" and assign it to none in the pseudo-element :after or :before .

So it would be -> pointer-events: none; in the pseudo-element.

Upvotes: 1

BoltClock
BoltClock

Reputation: 723498

As you observe, :hover styles on an element will be triggered when hovering over its contents, including descendants and pseudo-elements. However, you can't prevent :hover styles on an element from applying to its :after pseudo-element, nor can you use :not() to select :after pseudo-elements (this is explicitly disallowed by the spec).

This is by design, so the only way around it is to not use :after, but use JavaScript to generate some other element that you can append to the li and cancel the :hover effect on.

Upvotes: 1

Related Questions