3

I'm trying to change the background-color and color of a dropdown element of Bulma.io.

The problem is than no matter what I do it either changes the whole dropdown (also the bottom elements) or it changes only the background of the text (docs) and not the whole box.

I need to change the white box. I prepared as jsfiddle as example https://jsfiddle.net/agyfL3ae/2/ You will have to enlarge your window a lot as it's hidden on desktop

I've tried the following:

/* This changes also the elements below*/

.navbar-item :hover{
    background-color:red !important;
}

/* This changes only the text */

.navbar-link :hover{
    background-color:yellow;
}

Pretty much this is the box I need to change: https://i.snag.gy/pQyME2.jpg

Costantin
  • 2,486
  • 6
  • 31
  • 48

1 Answers1

2

You can read more about the Space in selectors here

Basically, that space tells the interpreter to add that background on hover for the children of .navbar-item

Instead, you should write:

.navbar-item:hover
Victor
  • 13,914
  • 19
  • 78
  • 147
  • Hi! Thanks for the link, I didn't know this difference between spaces. I've removed the space and now is applying the new style only to child elements. I need the opposite effect. Check updated [jsfiddle](https://jsfiddle.net/agyfL3ae/3/) – Costantin Aug 24 '17 at 18:52
  • @Costantin unfortunately, you won't be able to change the parent's style based on child's state using plain CSS. You will have to use JS for that. – Victor Dec 25 '18 at 22:07