如何将div悬停事件放置在父元素而不是子元素上？

Question

我是一名有用的助手，可以为您翻译文本。

我正在尝试构建一个小网站，并希望添加一些页面导航，以3个圆形按钮的形式呈现。因此，我添加了3个包含图像的div。我这样做是因为如果我只是将图像变成圆角，它不会很好地适配。 但现在我想在悬停时更改颜色，尽管我已经将hover效果添加到父div中，但它只对子图像起作用。

我的代码： html

<mat-grid-list cols="3" rowHeight="15vw" class="navContainer">
    <mat-grid-tile>
        <div class="navigationImg">
            <img class="linkImg" src="../../../assets/images/feast.png" alt="info"/>
        </div>
    </mat-grid-tile>
    <mat-grid-tile>
        <div class="navigationImg">
            <img class="linkImg" src="../../../assets/images/lineup.png" alt="lineup"/>
        </div>
    </mat-grid-tile>
    <mat-grid-tile>
        <div class="navigationImg">
            <img class="linkImg" src="../../../assets/images/sponsor.png" alt="sponsors"/>
        </div>
    </mat-grid-tile>
  </mat-grid-list>

css

.linkImg{
    height: 9vw;
}

.navigationImg{
    width: 15vw;
    height: 15vw;
    border-radius: 50%;
    background-color: lightgray;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navigationImg :hover{
    background-color: rgb(124, 122, 122);
}

屏幕截图

如何使整个圆圈变色，而不仅仅是图像？谢谢。

- Joren Goossens

---

.navigationImg:hover - 去掉空格 - Shiny

Answer 1

问题出在选择器中的空格。选择器.navigationImg :hover被翻译成.navigationImg *:hover，这意味着它适用于.navigationImg的后代而不是.navigationImg本身。

只需将.navigationImg :hover更新为.navigationImg:hover即可。

示例：

当前：

.parent :hover {
  background-color: red;
}

<div class="parent">
  Parent

  <div class="child">Child</div>
</div>

更新：

.parent:hover {
  background-color: red;
}

<div class="parent">
  Parent

  <div class="child">Child</div>
</div>

- Henry Woody