Как разместить событие div hover на родителя вместо ребенка?

Question

Я пытаюсь создать небольшой сайт, и я хочу добавить несколько страниц навигации в виде 3 круглых кнопок. Вот почему добавлены 3 div, каждый из которых содержит изображение. Я сделал это так, потому что, если я просто округлю изображение, оно не подходит. Но теперь я хочу изменить цвет при наведении, но хотя я добавил эффект наведения к родительскому элементу 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);
}

снимок экрана

как мне сделать так, чтобы весь круг менял цвет, а не только изображение? Спасибо

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>