Question

本质上，我将有两个链接到单独的div，悬停效果是2像素的底部边框。我的目标是，一旦用户处于活动链接上，边界线就会保留，而不是仅仅消失后。

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

Answer 1

将您的.active类移到div并使用Javascript切换它（我给你一个JQuery解决方案）。

在.cool-link:hover::after行之后添加新的选择器。

代码

＆＃13;

$('.cool-link a').click(function(){
  $('.cool-link').removeClass('active');
  $(this).closest('.cool-link').addClass('active');
});

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

Answer 2

添加

.cool-link:active:after {
    width: 100%;
}

并且可能在链接上添加.active类，具体取决于当前页面

Answer 3

我建议您在a:after而不是div上使用边框。对于active代码，添加.cool-link a.active::after与.cool-link a:hover::after

相同

Stack Snippet

＆＃13;

$(".cool-link a").on("click", function() {
  $(".cool-link a").removeClass("active");
  $(this).addClass("active");
})

＆＃13;

/* underline link on div*/

a {
  text-decoration: none;
}

.cool-link {
  text-align: center;
}

.cool-link a {
  display: block;
  color: #000;
  text-decoration: none;
}

.cool-link a::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: #DE591B;
  transition: width .3s;
}

.cool-link a:hover::after,
.cool-link a.active::after {
  width: 100%;
  transition: width .9s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <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>
  </div>
</div>

＆＃13;

Answer 4

试试这个解决方案。 CSS

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;
}

.cool-link a:visited,
.cool-link a:focus,
.cool-link a:active{
  border-bottom: 2px solid #DE591B;
  padding-bottom: 1px;
  width: 100%;
}

HTML

<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>

小提琴：https://jsfiddle.net/pqaozbhL/

我希望它会对你有所帮助。

CSS底部边框悬停在活动div上的效果

4 个答案: