Jquery - добавить css: встроенный активный стиль

Question

Как добавить: активный псевдо-класс, чтобы кнопка переводила onclick без разделенных глобальных css?

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

Answer 1

В соответствии с вашими требованиями, как я понял, при нажатии вы хотите перевести кнопку Y в 3 пикселя, и как только кнопка мыши оставлена, она должна вернуться в нормальное положение, что означает перевести Y 0 пикселей.

Итак, как: на самом деле активно работает, он активируется, как только вы щелкаете что-то, и деактивируется, когда вы оставляете кнопку мыши. Как это: С 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')