重新加載CSS用於：懸停

我製作了一個懸停遊戲，使閃爍的正方形，然後使方塊變成白色，一旦懸停，但閃爍的方塊的顏色覆蓋懸停。我使用chrome，這裏是代碼。你能告訴我一個刷新CSS的方法嗎？規模會更大。重新加載CSS用於：懸停

<html> 
 
    <head> 
 
    <style> 
 
     .a{ 
 
     display:inline; 
 
     background-color: blue; 
 
     color: blue; 
 
     width: 100px; 
 
     float: left; 
 
     } 
 
     .b{ 
 

 
     display:inline; 
 
     background-color: red; 
 
     color: red; 
 
     width: 100px; 
 
     float: left; 
 
     } 
 

 
     h1:hover{ 
 
     background-color: white; 
 
     color: white; 
 
     } 
 

 
    </style> 
 

 
    </head> 
 
    <body> 
 
    <div id="div" class="div"> 
 
    </div> 
 
    <script> 
 
     for(var i = 1;i<12;i){ 
 
     var a = document.createElement('h1') 
 
     document.getElementById('div').appendChild(a) 
 
     a.innerHTML=("HI") 
 
     a.id="id" 
 
     document.getElementById("id").setAttribute('class', 'a'); 
 
     a.id=null 
 
     i=i+1 
 

 

 
     var b = document.createElement('h1') 
 
     document.getElementById('div').appendChild(b) 
 
     b.innerHTML=("BYE") 
 
     b.id="id" 
 
     document.getElementById("id").setAttribute('class', 'b'); 
 
     b.id=null 
 
     i=i+1 
 
     } 
 

 

 

 

 
     for(i=1;i<10000;i){ 
 
      setTimeout(function(){ 
 
      document.getElementsByClassName('a')[0].setAttribute("style","background-color:red;color:red") 
 
      Array.prototype.forEach.call(document.getElementsByClassName('a'), 
 
          item => item.setAttribute("style","color: blue;background-color:blue")); 
 
      },(2*i-0)*1000) 
 
      setTimeout(function(){ 
 
      document.getElementsByClassName('a')[0].setAttribute("style","background-color:blue;color:blue") 
 
      Array.prototype.forEach.call(document.getElementsByClassName('a'), 
 
          item => item.setAttribute("style","color: red;background-color:red")); 
 
      },(2*i-1)*1000) 
 
      setTimeout(function(){ 
 
      document.getElementsByClassName('b')[0].setAttribute("style","background-color:blue;color:blue") 
 
      Array.prototype.forEach.call(document.getElementsByClassName('b'), 
 
          item => item.setAttribute("style","color: blue;background-color:blue")); 
 
      },(2*i-1)*1000) 
 
      setTimeout(function(){ 
 
      document.getElementsByClassName('b')[0].setAttribute("style","background-color:red;color:red") 
 
      Array.prototype.forEach.call(document.getElementsByClassName('b'), 
 
          item => item.setAttribute("style","color: red;background-color:red")); 
 
      },(2*i-0)*1000) 
 
      i=i+1 
 
     } 
 
    </script> 
 

 
    </body> 
 
</html>

什麼代碼所做的是它創造了他和的BYE的軍火庫。然後它使用它的類名更改事物的顏色，然後失敗，因爲它不刷新CSS。

來源

2017-10-07 John Hao

更改類，而不是內嵌樣式然後設置懸停規則，這些類 – charlietfl

添加「！重要」 CSS樣式要覆蓋

h1:hover{ 
    background-color: white!important; 
    color: white!important; 
    }

來源

2017-10-07 14:26:21

這是一個非常好的解決方案，謝謝。 –

不客氣。 –

tag款式的優先級低於.class或#id。只需添加!important懸停或創建h1與一些不會改變的類，併爲其編寫樣式。

來源

2017-10-07 14:09:15 kajeep33

重新加載CSS用於：懸停

回答

相關問題