时间戳

首页 > 解决方案 > 如何创建类似于此图像的悬停/活动链接？

html - 如何创建类似于此图像的悬停/活动链接？

问题描述

伙计们需要你的帮助 我正在创建一个带有悬停和活动链接的菜单列表，类似于下图。我需要在链接下方创建一个渐变圆。

这是一个示例图像，以便更好地理解。 在此处输入图像描述

这是我的代码：

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>

标签： htmlcssflexboxmenuheader

解决方案

不清楚图片，我猜线性渐变效果就足够了。

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>

推荐阅读