Problems with hover and before CSS3

Question

Is it possible to make a :hover on the :before element so that something shows over it?

https://stackoverflow.com/questions/5777210/how-to-write-hover-condition-for-abefore-and-aafter — onetwo12, Jul 13 '17 at 12:07
Possible duplicate of [How to write :hover condition for a:before and a:after?](https://stackoverflow.com/questions/5777210/how-to-write-hover-condition-for-abefore-and-aafter) — cjl750, Jul 14 '17 at 14:26

score 1 · Answer 1 · answered Jul 13 '17 at 12:36

1

Yes it can be done like..

.selector:hover:before {/* css rule goes here */}

answered Jul 13 '17 at 12:36

Rohit Sharma

3,304
2
19
34

score 0 · Answer 2 · edited Jul 14 '17 at 13:39

It is impossible to add a :hover style (or :active, or :focus) to any elements like :before or :after. They would have to be applied to an actual HTML element, not a pseudo-element.

From your screenshot, it appears you're trying to create a hover menu. Depending on your styles, you may be able to apply the :hover styles to the ul itself. However, you'll only be able to control ul styles with CSS - you cannot control li styles based on the hover state of their parent without JS.

If JS is an option, use it - it should be pretty simple in this case, and would make the code a lot easier. If css-only is a requirement, you might be able to get around this by setting the <ul> to a specific height (large enough to show the hover item but nothing else), and give ul:hover a larger height, or height: auto;, etc.

score 0 · Answer 3 · answered Jul 14 '17 at 13:42

0

Its called offcanvas

Refer https://www.w3schools.com/howto/howto_js_off-canvas.asp

AND https://v4-alpha.getbootstrap.com/examples/offcanvas/

Let me know if you require any further help

answered Jul 14 '17 at 13:42

Amaan Iqbal

761
2
9
25

Problems with hover and before CSS3

3 Answers3