html - 我希望在活动时给我的菜单加下划线,而不是仅仅悬停。那可能吗?(不是常规下划线代码)
问题描述
所以我正在使用我在 CodePen 上找到的一些 CSS 代码在我的网站菜单上有一个很好的下划线,所以它没有使用应用于链接的常规下划线。
目前,它在悬停时设置为带有轻微动画效果的下划线,但我希望它在活动时而不是悬停时加下划线。我尝试过使用多种方法来解决它,但由于它不完全是我的下划线代码,有些部分让我感到困惑。
有人可以帮忙吗?如果它看起来一团糟,我深表歉意,如果需要,我可以获取其他代码。非常感谢。
这是我的代码:
HTML:
<nav>
<ul>
<li class="item"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
CSS(来自codepen的代码):
a:link {
text-decoration: none!important;
}
nav li a {
color: #fff;
font-size: 14px;
position: relative;
letter-spacing: 2px;
text-transform: uppercase;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
padding: 15px;
}
a:after {
content: "";
position: absolute;
height: 2px;
background-color: white;
width: 0;
left: 50%;
bottom: 0;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) all;
transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) all;
}
a:hover {
color: tomato;
}
a:hover:after {
width: 100%;
}
解决方案
只需创建一个与悬停样式具有相同样式的类。
转这个:
a:hover:after {
width: 100%;
}
进入这个:
a.active:after {
width: 100%;
}
然后只需将类添加到a
:
<li class="item"><a class="active" href="index.html">Home</a></li>
ul {
padding: 0;
margin: 0;
list-style:none;
}
ul li {
float: left;
}
a:link {
text-decoration: none !important;
}
nav li a {
font-size: 14px;
position: relative;
letter-spacing: 2px;
text-transform: uppercase;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
padding: 15px;
}
a:after {
content: "";
position: absolute;
height: 2px;
background-color: red;
width: 0;
left: 50%;
bottom: 0;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) all;
transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) all;
}
a:hover {
color: tomato;
}
/*a:hover:after {
width: 100%;
}*/
a.active:after {
width: 100%;
}
<nav>
<ul>
<li class="item"><a class="active" href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
推荐阅读
- python - 在神经科学实验中集成实验室笔记本、实验设置规范、行为跟踪和 ephys 数据
- .net-core - .NET Core 覆盖特定操作的控制器级别授权属性
- firebase - 遍历 Firestore 集合求和值上的文档的最佳方法是什么?
- enums - swift 4.2 - 如果var具有有效的枚举值,我如何检查guard
- python - Python: Sort by Nested Dictionary Value (no categories)
- r - 如何使用 fitdist 函数(负二项式)?
- swift - I keep using this same chunk of code over and over. How do I consolidate it?
- ios - Google 助理的深层链接参数
- ios - Casting to object with Codable
- javascript - Positioning of legend in javascript