Как ссылаться на этот CSS в Javascript?

Question

У меня есть следующий CSS для события наведения мыши. Я не уверен, как обращаться к #tabs ul li a: hover изнутри Javascript?

#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> 

Answer 1

Это:

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

не является допустимым синтаксисом, вам нужно только указать идентификатор там:

document.getElementById("tabs") 

You ca п изменить стиль элемента на парения что-то вроде этого:

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

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

Давайте предположим, что вы присвоили идентификатор myid к вашей ссылке, вы можете сделать вещи для того, как это:

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

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

Обновление:

Поскольку в своем коде вы используете loadit(this) в OnClick случае, вам не нужно использовать document.getElementById потому что элемент уже с привязкой this ключевых слов, а также вы можете использовать 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 
    } 
); 
}); 

Answer 2

Одним из решений является для редактирования таблицы стилей вместо изменения стиля каждого элемента, это можно сделать с помощью простого однострочника:

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

Если второй аргумент указывает, что правило шо uld будет вставлен сначала в таблицу стилей.

Для IE это делается с помощью функции addRule вместо:

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

Update:

В вашем случае, это означало бы заменить эту строку:

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

Answer 3

Вы имеете в виду это? Это не сработало ...

#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> 
}