how to place div hover event on parent instead of child?

Question

Im trying to build a little website and I want to add some page navigations in the form of 3 round buttons. That's why added 3 div's that each contain an image. I have made it like that because if I just rounded an image it didn't fit well. But now I want to change the color on hovering but altough I have added the hover effect to the parent div it only works for the child image.

My code: 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);
}

screenshot

how do I make it so that the whole circle changes color and not just the image? Thanks

Answer 1

The issue is the space in your selector. The selector .navigationImg :hover gets translated to .navigationImg *:hover, which means it applies to the descendants of .navigationImg rather than .navigationImg itself.

Just update .navigationImg :hover to .navigationImg:hover.

Example:

Current:

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

<div class="parent">
  Parent

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

Updated:

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

<div class="parent">
  Parent

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