Question

我有几个动作按钮，它们具有悬停效果。当单击并激活一个按钮时，我希望按钮边框显示并改变颜色。理想情况下，我想使用纯CSS来实现这一点，但是尝试没有成功。这可能吗？我试过使用：focus和：active伪类，但没有任何效果。这是我的按钮代码：

 .action-buttons {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      justify-content: space-around;
      margin-top:2.75em;
    }
    
    .button {
      position: relative;
      padding: 10px 16px;
      font-size: 18px;
      width: 20rem;
      background-color: transparent;
      color: $color-lightest;
      text-align: center;
      cursor: pointer;
    }
    
    .button:before, .button:after {
      display: block;
      content: " ";
      border-top: none;
      border-right: none;
      border-bottom: none;
      border-left: none;
      position: absolute;
      width: 0;
      height: 0;
      opacity: 0;
      transition: opacity 200ms ease-in-out;
    }
    
    .button:before {
      top: -0.15rem;
      left: 0;
    }
    
    .button:after {
      bottom: 0;
      right: 0;
    }
    
    .button.at_the_same_time:hover:before {
      width: 20rem;
      height: 100%;
      opacity: 1;
      border-top: .5rem solid $color-lightest;
      border-right: .5rem solid $color-lightest;
      transition: width 300ms cubic-bezier(0.07, 0.62, 0.61, 1), height 150ms 300ms cubic-bezier(0.07, 0.62, 0.61, 1);
    }
    
    .button.at_the_same_time:hover:after {
      width: 20rem;
      height: 100%;
      opacity: 1;
      border-bottom: .5rem solid $color-lightest;
      border-left: .5rem solid $color-lightest;
      transition: width 300ms cubic-bezier(0.07, 0.62, 0.61, 1), height 150ms 300ms cubic-bezier(0.07, 0.62, 0.61, 1);
    }

<div class="action-buttons">
        <a class="button at_the_same_time click">Generate Forms</a>
        <div class="divider"></div>
        <a class="button at_the_same_time click" name="10" data-slide="slide10">Sign Forms</a>   
        <div class="divider"></div>
        <a class="button at_the_same_time click" name="11" data-slide="slide11">Completed Forms</a>
      </div>

我已经尝试过了，但是不起作用：

.button.at_the_same_time:active, 
 .button.at_the_same_time:focus 
 {
     border.5rem solid $color-lightest;
  }

Answer 1

实际上有多个原因使其无法正常工作。首先，您的CSS中有一个错字

border.5rem solid $color-lightest;

不起作用，因为边界后缺少冒号和空格

border: .5rem solid $color-lightest;

然后您可能想看看：Is an anchor tag without the href attribute safe?

您实际的<a>不是一个正确的链接，它是一个占位符超链接，因此浏览器的反应有所不同。

在href中仅添加#即可使其在点击时激活。

请参见jsfiddle here

启用后更改按钮边框

1 个答案: