我试图做到这一点,以便当您将鼠标悬停在按钮上时,其下方会出现一个小圆圈,并且在活动按钮上,该圆圈仍然存在,如下所示:
是否可以专门通过 css 和 html 来完成此操作,或者我必须求助于 JS?
我已经尝试绘制并插入图片,但可惜没有任何效果,代码如下所示:
HTML:
.header-mid {
display: flex;
align-items: center;
margin-left: 283px;
}
.header-mid a {
color: white;
opacity: 50%;
font-family: 'SF pro display';
font-weight: medium;
font-size: 15px;
padding-left: 12.5px;
padding-right: 12.5px;
padding-top: 20px;
padding-bottom: 20px;
}
.header-mid a:hover {
color: #C681FF;
opacity: 50%;
border-radius: 10px;
transition: 0.2s;
}
.header-mid .active {
color: #C681FF;
opacity: 100%;
}
<div class="header-mid">
<button><a class="active" href="#">Режимы</a></button>
<button><a href="#">Купить R$</a></button>
<button> <a href="#">Бесплатная рулетка</a></button>
<button><a href="#">Мои промокоды</a></button>
</div>
论坛上已经有一个类似的问题,但是该人将这些按钮制作为列表,但正如您所看到的,我的情况有点不同。