Change background-color on hover bulma dropdown

Question

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

Solution

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

Comments

[Costantin]

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

[Victor]

@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.