CSS: Change element's bacgkground on hover: only changes a child's background instead of a parent's (fiddle, pictures)

Question

I have this code:

html:

<div class="item">
  <p>hello</p>
</div>

CSS:

.item {
    border: 2px dashed green;
    background-color: red;
    width: 100px;
    height: 100px;
    margin-left: 30px;
    margin-top: 30px;
}

.item :hover  {
   background-color: yellow;
}

I'm trying to change all of the item's color to the yellow on hover. However, only the text's background color changes:

while I want this:

Fiddle: https://jsfiddle.net/87qd0au9/

`.item :hover` means that any of the item's children will be affected, since there is a space.`.item:hover` means that the parent is affected. — Yousername, Dec 27 '19 at 14:41

score 1 · Accepted Answer · answered Dec 27 '19 at 14:44

1

remove the space between item and hover

.item:hover  {
  background-color: yellow;
}

answered Dec 27 '19 at 14:44

bill.gates

14,145
3
19
47

score 1 · Answer 2 · answered Dec 27 '19 at 14:44

1

Simply remove the space between item and :hover.

Explanation: In CSS, the space character is a "child selector", meaning that with the space you are not targeting the item div, but its children.

answered Dec 27 '19 at 14:44

Anis R.

6,656
2
15
37

CSS: Change element's bacgkground on hover: only changes a child's background instead of a parent's (fiddle, pictures)

2 Answers2