Question

如何添加：active pceudo类，以便按钮可以转换onclick而无需单独的全局CSS？

const $button = $('<button></button>').css({
      margin: '5px',
      ':active': 'transform: translate(0, 3px)',
    })

Answer 1

根据您的理解，您希望在单击时将按钮的Y转换为3px，一旦鼠标左键，它应回到正常位置，这意味着将Y转换为0px。

：active实际上是如何工作的，一旦您单击某些东西，它将立即被激活，而当您单击鼠标时将其停用。像这样：使用CSS：

    button {
       color: red;
      background: white;
    border: 2px solid;
    padding: 20px 40px;
      display: block;
    }
    button:active {
      transform: translate(0px,3px);
    }

    <button>Click</button>

现在用JQuery检查同一件事。

$("button").mousedown(function(){
  $(this).css('transform','translate(0,3px)')
});
$("button").mouseup(function(){
  $(this).css('transform','translate(0,0px)')
});

button {
   color: red;
  background: white;
border: 2px solid;
padding: 20px 40px;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click</button>

只要让我知道如果我误解了您的要求，

Answer 2

或者，您也可以将样式注入头部：

$('head').append('<style>.myClass:hover { background-color: red; }</style>')
$('<button>123</button>').addClass('myClass')

jQuery-添加CSS：Active样式内联

2 个答案: