React hover/active/focus style css selector not working for enclosed element

Question

i want to make a dropdown menu on butto hover, but when hovered, the effect are not applying to any other element like div or body.
this is the code

here is a link to my code if you really like to dive in search for dropbtn:hover

.dropbtn:hover .dropdown-content {
  background: green ; //tried !important also not working
  display:block;
 }

To apply style to .dropbtn:hover AND to .dropdown-content you should separate them with comma: .dropbtn:hover, .dropdown-content {...} — fen1x
– fen1x, Commented Jul 24, 2017 at 5:41
i want to change .dropdown-content ,background and display. when hovering .dropbtn — user3998223
– user3998223, Commented Jul 24, 2017 at 5:43

Amaury Hanser · Accepted Answer · 2017-07-24 06:43:26Z

3

Your dropdown-content is not a child of your .dropbtn, so .dropbtn:hover .dropdown-content won't work. You could use + selector:

&:hover {
  & + .dropdown-content{
     background: green;
     display:block;
  }

answered Jul 24, 2017 at 6:43

Amaury Hanser

3,49716 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

szpali76 · Accepted Answer · 2017-07-24 06:43:06Z

1

The selector is no good, .dropbtn:hover .dropdown-content, means that your .dropdown-content should be contained by .dropbtn, in the HTML they are next to each other. You should change the HTML to make .dropdown-content child of .dropbtn, or you could change the selector into .dropbtn:hover + .dropdown-content

answered Jul 24, 2017 at 6:43

szpali76

231 gold badge2 silver badges9 bronze badges

Collectives™ on Stack Overflow

React hover/active/focus style css selector not working for enclosed element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related