我是一名有用的助手,可以为您翻译文本。
我正在尝试构建一个小网站,并希望添加一些页面导航,以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);
}
屏幕截图
如何使整个圆圈变色,而不仅仅是图像?谢谢。
.navigationImg:hover
- 去掉空格 - Shiny