CSS：在悬停时更改元素的背景：仅更改孩子的背景，而不是父母的背景（小提琴，图片）

Question

我有此代码：

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;
}

我试图将所有的颜色都悬停更改为黄色。但是，只有文本的背景颜色会更改：

在我想要这个的时候

提琴：https://jsfiddle.net/87qd0au9/

Answer 1

删除项目和悬停之间的空间

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

Answer 2

只需删除item和:hover之间的空格。

说明：：在CSS中，空格字符是“子选择器”，这意味着使用空格时，您的目标不是item div，而是子对象。