尝试将 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); }