Изменить цвет текста при наведении курсора

Я надеюсь добиться этого, используя чистый CSS и Javascript. Я также в порядке с PHP. Я избегаю jquery, потому что я пытаюсь немного больше изучить javascript, и я обнаружил, что на некоторых сайтах wordpress jquery не всегда работает так, как мне нужно. Насколько я могу судить, я не сделал никаких программных ошибок, но я должен что-то упустить, потому что это работает неправильно. Сначала я дам ссылку, где можно найти код. http://jsfiddle.net/FFCFy/13/

Далее я дам фактический код.

Javascript:

setInterval(function() {
    var x = document.getElementById("div1");
    var y = document.getElementById("div2");

    function stext() {
        x.style.color = 'red';
        y.style.color = 'black';
    }

    function htext() {
        x.style.color = 'black';
        y.style.color = 'red';
    }
}, 250);

HTML:

<html>
<body>
    <span id="div1" style="color:black;" onmouseover="stext"   onmouseout="htext">TEXT1</span><p />
    <hr color="black" />
<span id="div2" style="color:red;"onmouseover="htext" onmouseout="stext">Text2</span>

</body>
</html>

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


javascript css onmouseover onmouseout
person myth024    schedule 31.10.2012    source источник
comment
Возможно, я неправильно понимаю ваш вопрос, но почему бы не использовать CSS :hover? (вам нужно сделать элементы <a> тегами для ‹ IE9, но это изменит цвет при наведении)   -  person Scrimothy    schedule 01.11.2012
comment
Чего именно вы пытаетесь достичь?   -  person Whymarrh    schedule 01.11.2012
comment
Разве в некоторых старых браузерах нет проблем с :hover для некоторых типов элементов? Это преимущество использования jQuery, он знает, как обойти это.   -  person Barmar    schedule 01.11.2012
comment
цель НЕ использовать наведение CSS заключается в том, что я намеревался в конечном итоге внести изменение, которое не было связано с простым цветом. Тогда, в 2012 году, я все еще учился и искал способ вызвать изменение при наведении курсора, чтобы в конечном итоге превратить эту идею в более крупный проект. Первый ответ, который я получил, оказался решением, которое я искал.   -  person myth024    schedule 31.12.2015

Ответы (5)


arrow_upward
3
arrow_downward

Вам не нужен setInterval.

function stext() {
    var x = document.getElementById("div1");
    var y = document.getElementById("div2");
    x.style.color = 'red';
    y.style.color = 'black';
}

Обновлен рабочий JSFiddle

​

person Anirudh Ramanathan    schedule 31.10.2012
comment
Я знаю, что это было очень давно. Я вышел за рамки этого сейчас и даже не помню, почему я пытался сделать это конкретно. Спасибо. - person myth024; 09.06.2015

arrow_upward
8
arrow_downward

Вы можете использовать просто этот код:

<html>
<head>
<body>
<font onmouseover="this.style.color='red';" onmouseout="this.style.color='black';">Text1</font>
<font onmouseover="this.style.color='black';" onmouseout="this.style.color='red';">Text2</font>
</body>
</html>
person luk27    schedule 12.07.2014
comment
Это хорошее решение, но код неверный. Это должны быть onmouseover = "this.**style**.color='red';" и onmouseout = "this.**style**.color='black';" и т. д. (Справочник) - person Luke; 04.08.2015
comment
Это сработало и упрощает вызов отдельной функции — именно то, что я искал. Пальцы вверх. - person nukalov; 01.05.2019

arrow_upward
3
arrow_downward

почему бы просто не:

#div1:hover {
    color: red;
}
person Bruno    schedule 31.10.2012
comment
в некоторых случаях в уже существующем CSS уже есть элемент наведения, определенный с помощью этого, я могу указать изменение более динамично, а также выполнить эффект затухания, а не просто изменить простой цвет. - person myth024; 25.02.2013

arrow_upward
0
arrow_downward

Вам не нужен setInterval:

 var x = document.getElementById("div1");
 var y = document.getElementById("div2");
 function stext() {
     x.style.color = 'red';
     y.style.color = 'black';
 }
 function htext() {
     x.style.color = 'black';
     y.style.color = 'red';
 }
person Community    schedule 31.10.2012

arrow_upward
0
arrow_downward

Ваши функции htext и stext определены внутри анонимной функции и поэтому недоступны глобально. Переместите определения функций за пределы анонимной функции или назначьте функции глобальному объекту (окну), чтобы они были доступны.

Но опять же... Почему этот код все равно находится внутри вызова setInterval? Это не имеет никакого смысла.

person Hubro    schedule 31.10.2012