html - 保持在事件 div 上的 CSS 底部边框悬停效果

Question

本质上，我会将两个链接放入单独的 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>

Answer 1

将你的 .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>