我在 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>
最佳答案
因为当您指定边框时,它出现在元素的实际宽度之后。
使用
#addButton{
box-sizing:border-box
}
此 css 属性将合并实际宽度的边框空间。
关于html - 单击边框不激活事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38826182/