如何解决如何创建类似于此图像的悬停/活动链接?
人需要您的帮助 我正在创建一个带有悬停和活动链接的菜单列表,类似于下图。 我需要在链接下方创建一个渐变圆。
这是我的代码:
header,ul {
display: flex;
justify-content: center;
align-items: center;
background-color: cornsilk;
}
ul {
height: 80px;
}
li {
list-style-type: none;
padding: 0 18px;
}
header a {
font-size: 14px;
color: #555555;
text-decoration: none;
}
header a:hover {
color: #EB6060;
}
.active {
color: #EB6060;
}
<header>
<div class="menu">
<ul>
<li>
<a class="active" href="menu1.html">Menu 1</a>
</li>
<li>
<a href="#">Menu 2</a>
</li>
<li>
<a href="#">Menu 3</a>
</li>
<li>
<a href="#">Menu 4</a>
</li>
<li>
<a href="#">Menu 5</a>
</li>
</ul>
</div>
</header>
解决方法
图片不清楚,我猜想线性渐变效果就足够了。
header,ul {
display: flex;
justify-content: center;
align-items: center;
background-color: cornsilk;
}
ul {
height: 80px;
}
li {
list-style-type: none;
padding: 0 18px;
}
header a {
font-size: 14px;
color: #555555;
text-decoration: none;
position: relative;
}
header a:hover {
color: #EB6060;
}
.active {
color: #EB6060;
}
header a:hover::after,.active::after {
position: absolute;
content: "";
top: 1.4em;
left: calc(50% - .3em);
width: .6em;
height: 0.6em;
background-image: linear-gradient(45deg,rgb(230,100,101),rgb(145,152,229));
border-radius: 50%;
box-shadow: 1px 1px 5px 0px #ccc;
}
<header>
<div class="menu">
<ul>
<li>
<a class="active" href="menu1.html">Menu 1</a>
</li>
<li>
<a href="#">Menu 2</a>
</li>
<li>
<a href="#">Menu 3</a>
</li>
<li>
<a href="#">Menu 4</a>
</li>
<li>
<a href="#">Menu 5</a>
</li>
</ul>
</div>
</header>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。