如何在Javascript中引用此CSS？

我有以下CSS鼠標懸停事件。我不知道如何引用#tabs ul li a：從Javascript內部懸停？如何在Javascript中引用此CSS？

#tabs ul li a:hover 
{ 
    color: #000; 
    font-weight:bold; 
    background-color: #0ff; 
}

，我希望交換的背景色行這段JavaScript代碼：

<script type="text/javascript"> 
    hex=255; 

    function fadetext(){ 
     if(hex>0) { 
      hex-=11; 
      document.getElementById("#tabs ul li a:hover").style.color="rgb("+hex+","+hex+","+hex+")"; 
      setTimeout("fadetext()",50); 
     } 
     else 
      hex=255; 
    } 
</script>

來源

2010-06-29 John

此：

document.getElementById("#tabs ul li a:hover")

是無效的語法，你只需要指定ID there：

document.getElementById("tabs")

You ca n切換元素的風格上懸停是這樣的：

var elem = document.getElementById("id"); 

elem.onmouseover = function(){ 
    // your code 
};

假設您已經分配的ID的myid你的鏈接，你可以像這樣做的東西：

var elem = document.getElementById("myid"); 

elem.onmouseover = function(){ 
    elem.style.backgroundColor = 'color value'; 
    elem.style.color = 'color value'; 
};

更新：

因爲在你的代碼在onclick事件使用loadit(this)，你並不需要使用document.getElementById因爲元素已經與引用關鍵字，也可能需要，如果你想改用onmouseover事件click活動爲契機，事情發生時，元素那幅像：

<li><a href="tab-frame-workexperience.html" target="mainFrame" onmouseover="loadit(this)" >Work experience</a></li>

，然後你的函數應該是這樣的：

function loadit(elem) 
{ 
    elem.style.color = 'color value'; 
}

和/或如果需要，您可以爲兩個事件創建兩個函數。

注意也可以使用jQuery輕鬆和unobstrusive時尚與hover方法做到這一點：

$(function(){ 
    $('#tabs ul li a').hover(function(){ 
    $(this).css('color', '#ff0000'); // this fires when mouse enters element 
    }, function(){ 
    $(this).css('color', '#000'); // this fires when mouse leaves element 
    } 
); 
});

來源

2010-06-29 13:22:36 Sarfraz

這是選項卡鏈接聲明：

我試圖ById（「標籤」），但沒有工作，要麼 – John 2010-06-29 13:27:23

@約翰：發表您嘗試在你的問題代碼請清楚解釋。謝謝 – Sarfraz 2010-06-29 13:29:50

@John：如果有幫助，也請參閱我的更新回答。謝謝 – Sarfraz 2010-06-29 13:35:51

一種解決方法是編輯而不是改變每個元素的風格樣式表，這可以用一個簡單的單行來完成：

document.styleSheets[0].insertRule("#tabs ul li a:hover{rgb(255, 255, 255);}", 0);

其中第二個參數指定規則sho在樣式表中首先插入。

對於IE瀏覽器，這是與addRule功能，而不是做：

document.styleSheets[0].addRule("#tabs ul li a:hover", "rgb(255, 255, 255)");

更新：

對你來說，這將意味着替換該行：與

document.getElementById("#tabs ul li a:hover").style.color="rgb("+hex+","+hex+","+hex+")";

var ss = document.styleSheets[0]; //gets the first external stylesheet in your document 
if(ss.insertRule) //checks browser compatibility 
    ss.insertRule("#tabs ul li a:hover{rgb("+ hex + ", " + hex + ", " + hex + ");}", 0); 
else 
    ss.addRule("#tabs ul li a:hover", "rgb("+ hex + ", " + hex + ", " + hex + ")");

來源

2010-06-29 13:30:41 Herber

你的意思是這樣嗎？這並沒有工作...

#tabs ul li a:hover 
{ 
    color: #000; 
    font-weight:bold; 
    <script type="text/javascript"> 
      hex=255; 
      var elem = document.getElementById("tabs"); 
      elem.onmousehover = function fadetext(){ 
      if(hex>0) { 
       hex-=11; 
       elem.style.color="rgb("+hex+","+hex+","+hex+")"; 
       setTimeout("fadetext()",50); 
      } 
      else 
       hex=255; 
      } 
     </script> 
}

來源

2010-06-29 13:34:01 John

如何在Javascript中引用此CSS？

回答

相關問題