Попытка добавить HOVER к идентификатору, который создается на лету

Question

Я задал этот вопрос несколько минут go.

В вопросе я пытался создать таблицу во время выполнения. Теперь это прекрасно работает с помощью Омри Аттия, который отвечает на вопрос.

Я немного изменил его решение, которое также работает отлично.

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) создайте css id s как #thumbnailX, где X - число, переданное функции, создайте div, примените этот id к новому div и верните его.

Что Сейчас я пытаюсь добавить свойство hover к этому идентификатору, создав новый стиль с именем #thumbnailX:hover {transform: scale(1.5);} и добавив его к стилям тела.

Итак, я изменил код на

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);

  // THIS IS NOT WORKING
  var cssZoom = "#thumbnailXXX:hover".concat(celulaZOOM);
  cssZoom = cssZoom.replace(/XXX/g, numString);
  var styleZoom = document.createElement('style');
  styleZoom = type;
  styleZoom.appendChild(document.createTextNode(cssZoom));
  document.head.appendChild(styleZoom);
  return div;
}

но последняя часть createDiv не работает. Нет ошибки на консоли.

Answer 1

ваш код работает. Вы просто написали styleZoom = type вместо styleZoom.type = type, поэтому вы в основном задали styleZoom для текста и переопределяли элемент.

Еще раз я думаю, что лучше всего дать всем элементам класс и добавить к css:

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