Как ссылаться на этот 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")

Вы можете изменить стиль элемента при наведении на что-то вродеthis:

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 , чтобы сделать это легко и незаметно с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

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

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

Answer 3

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

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

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

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