本质上,我会将两个链接放入单独的 div 中,悬停效果是一个 2 像素的底部边框。我的目标是,一旦用户进入事件链接,边界线就会保留,而不是立即消失。
/* underline link on div*/
a {
text-decoration: none;
}
.cool-link {
display: inline-block;
color: #000;
text-decoration: none;
}
.cool-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #DE591B;
transition: width .3s;
}
.cool-link:hover::after {
width: 100%;
//transition: width .9s;
}
<div class="col-xs-6 cool-link">
<a href="#" class="active" id="login-form-link">Login</a>
</div>
<div class="col-xs-6 cool-link">
<a href="#" id="register-form-link">Register</a>
</div>
最佳答案
将你的 .active
类移动到 div 并使用 Javascript 切换它(我给你一个 JQuery 解决方案)。
在 .cool-link:hover::after
行之后添加一个新的选择器。
代码
$('.cool-link a').click(function(){
$('.cool-link').removeClass('active');
$(this).closest('.cool-link').addClass('active');
});
/* underline link on div*/
a {
text-decoration: none;
}
.cool-link {
display: inline-block;
color: #000;
text-decoration: none;
}
.cool-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #DE591B;
transition: width .3s;
}
.cool-link:hover::after,
.cool-link.active::after /*this is it*/
{
width: 100%;
//transition: width .9s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-6 cool-link active">
<a href="#" id="login-form-link">Login</a>
</div>
<div class="col-xs-6 cool-link">
<a href="#" id="register-form-link">Register</a>
</div>
关于html - 保持在事件 div 上的 CSS 底部边框悬停效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48379305/