(SCSS-CSS) &:hover CSS method codepen

Question

I have found this template in codepen website and i just want to create the mega-menu following this template . however i don't know how to use SCSS is there a method to create a "mega-menu" using Css instead. i think that the code responsible for this is &:hover so is there any code like this in CSS ("note":"i don't want this code :hover

visit: https:// codepen. io/jayanudin/pen/groxYe?depth=everything&order=popularity&page=3&q=dropdown+hover&show_forks=false

`selector { &:hover }` is equivalent to `selector:hover`! – MEE Feb 15 '18 at 19:00 — MEE, Feb 15 '18 at 19:00

score 3 · Accepted Answer · answered Feb 15 '18 at 19:00

3

&:hover is just appending a :hover selector to the parent.

.parent {
    &:hover {}
}

Is the same as

.parent:hover {}

answered Feb 15 '18 at 19:00

TazTheManiac

392
1
8

does that mean that .menus-megamenus { &:hover .mega-menus { opacity: 1; visibility: visible; } }is equivalent to .menus-megamenus .mega-menus:hover { opacity:1; visibility:visible;} – MOHAMED ALAA TABNAJ Feb 16 '18 at 14:51
The hover goes on the parent, so it is .menus-megamenus:hover .mega-menus {} – TazTheManiac Feb 16 '18 at 15:01

(SCSS-CSS) &:hover CSS method codepen

1 Answers1