CSS轉換不影響HTML生成的HTML

我有一個css轉換，可以在懸停時旋轉對象。CSS轉換不影響HTML生成的HTML

.rotate { transition: 0.2s; } 
.rotate:hover { transform: rotate(20deg); }

當應用於硬編碼的HTML元素時，此功能完美無缺。

但是，該頁面包含一個腳本，可以生成更多的HTML並將其插入div（div.innerHTML = newHTML）。

css轉換不適用於腳本生成的任何元素。

爲什麼會出現這種情況，如何糾正？

編輯：這是一個簡化的例子，顯示我的代碼，但我無法得到的例子工作，硬編碼旋轉和生成的HTML不旋轉，我不知道爲什麼。

<!doctype html> 
    <head> 
     <style> 
      .rotate { 
       transition: 0.2s; 
      } 

      .rotate:hover { 
       transform: rotate(20deg); 
      } 
     </style> 
    </head> 
    <body> 
     <a class="rotate" href="#">A test text</a> 
     <div id="plot"></div> 
     <script> 

      function makeHTML() 
      { 
       return '<a class="rotate" href="#">I am a HTML link</a>'; 
      } 

      var plot = document.getElementById('plot'); 

      var text = makeHTML(); 

      plot.innerHTML = text; 

     </script> 
    </body> 
</html>

來源

2017-07-28 Nonnisi

請添加代碼 –

的一個片段不能複製〜https://jsfiddle.net/6Lpvaooc/。你確定你的JavaScript正在爲新元素添加正確的類？ – Phil

你所描述的在技術上不可行。如果他們有這些類，並且'transition'和'transform'屬性不會被CSS中更具體的選擇器所應用的規則所覆蓋，那麼您指定的那個應該適用。最簡單的方法是檢查添加的元素，進入「計算」（靠近「樣式」）選項卡，並檢查元素的「transition」和「transform」屬性中指定的內容。它也會告訴你什麼規則設置它們。如果沒有[mcve]，我們無法幫到你。 –

transform僅適用於塊級元素。默認情況下，<a>元素有display:inline。所以，你需要申請display: inline-block;，爲transform工作：

function makeHTML() { 
 
    return '<a class="rotate" href="#">I am a HTML link</a>'; 
 
} 
 

 
var plot = document.getElementById('plot'), 
 
    text = makeHTML(); 
 

 
plot.innerHTML = text;

.rotate { 
 
    transition: 0.2s; 
 
    display: inline-block; 
 
} 
 

 
.rotate:hover { 
 
    transform: rotate(20deg); 
 
}

<a class="rotate" href="#">A test text</a> 
 
<div id="plot"></div>

來源

2017-07-28 00:41:57

CSS轉換不影響HTML生成的HTML

回答

相關問題