html - 单击边框不激活事件

Question

我在 css 中使用动画和在 JS 中使用事件处理程序时遇到问题。我必须为我的按钮设置特定样式(正常和带有 :active 后缀)。这个解决方案让我模拟“点击按钮”。在 Html 中(这是 angular 指令)我在该按钮上有指令 ng-click 但它只在我单击按钮主体而不是边框​​时运行事件。但是我的 css 在边框上设置了指针，点击边框时也有动画。

我正在寻找修复该事件的最佳实践/解决方案。也许我必须保留带有 active 后缀的 css 样式或向我的样式中添加一些内容。

CSS

#addButton {
    padding: 5px;
    float: left;
    background: linear-gradient(#92AFDE, #668FED);
    border: solid 2px #14438F;
    margin-left: 10px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
}
#addButton:ACTIVE {
    transform: translateY(4px);
}

HTML

<div class="card">
    <img ng-click="selectCard()" style="width: 150px; height: 200px;"   ng-src="cards/\{{cardId}}.png"></img>
    <button  ng-click="addCard()" id="addButton">Add<div class="count">0</div></button>
    <div id="delButton">X</div>
</div>

Answer 1

因为当您指定边框时，它出现在元素的实际宽度之后。

使用

#addButton{
  box-sizing:border-box
}

此 css 属性将合并实际宽度的边框空间。