尝试将 HOVER 添加到动态创建的 ID

Question

var celulaCSS = `{  background-image: url('thumbnails/thumbnailXXX.jpg');  background-position:center;  background-repeat:no-repeat;  background-size:cover;  width:300px;   height:169px;  transition: transform .2s; /* Animation */  margin: 0 auto;}`;function createDiv(number) {  var numString = number.toString(10);  const type = 'text/css';  var css = "#thumbnailXXX".concat(celulaCSS);  css = css.replace(/XXX/g, numString);  let div = document.createElement('div');  div.id = 'thumbnailXXX'.replace(/XXX/g, numString);  var style = document.createElement('style');  style.type = type;  style.appendChild(document.createTextNode(css));  document.head.appendChild(style);  return div;}createDiv(number)将创建一个id类似于 的css #thumbnailX，其中 X 是传递给函数的数字，创建一个div，将其应用于id新的 div 并返回它。我现在想做的是hover通过创建一个名为的新样式#thumbnailX:hover {transform: scale(1.5);}并将其添加到主体样式中，向该 id 添加一个属性。所以，我将代码修改为var celulaCSS = `{  background-image: url('thumbnails/thumbnailXXX.jpg');  background-position:center;  background-repeat:no-repeat;  background-size:cover;  width:300px;   height:169px;  transition: transform .2s; /* Animation */  margin: 0 auto;}`;var celulaZOOM = `{    transform: scale(1.5); }`;function createDiv(number) {  var numString = number.toString(10);  const type = 'text/css';  var css = "#thumbnailXXX".concat(celulaCSS);  css = css.replace(/XXX/g, numString);  let div = document.createElement('div');  div.id = 'thumbnailXXX'.replace(/XXX/g, numString);  var style = document.createElement('style');  style.type = type;  style.appendChild(document.createTextNode(css));  document.head.appendChild(style);}但最后一部分createDiv不起作用。控制台上没有错误。

Answer 1

你的代码正在运行。您只是编写styleZoom = type而不是这样styleZoom.type = type，您基本上设置styleZoom为文本并覆盖该元素。

我再次认为最好给所有元素一个类，然后添加到 css 中：

.myClass:hover {
    transform: scale(1.5);
}