如何在JavaScript中的DOM创建元素上设置css":hover"？

const element = document.createElement('div');
element.style.cssText = 'background-color: red;';
element.onmouseover = function() {
  element.style.backgroundColor = 'blue';
};
element.onmouseout = function() {
  element.style.backgroundColor = 'red';
};

const element = document.createElement('div');
element.classList.add('my-element');
element.onmouseover = function() {
  element.classList.add('hover');
};
element.onmouseout = function() {
  element.classList.remove('hover');
};

.my-element {
  background-color: red;
}
.my-element:hover,
.hover {
  background-color: blue;
}