Изменение: наведите свойства CSS с помощью JavaScript

мне нужно найти способ изменить CSS: hover свойства с помощью JavaScript.

например, предположим, что у меня есть этот HTML-код:

<table>
  <tr>
    <td>Hover 1</td>
    <td>Hover 2</td>
  </tr>
</table>

и следующий код CSS:

table td:hover {
background:#ff0000;
}

Я хотел бы использовать JavaScript, чтобы изменить свойства

hover, скажем, background:#00ff00. знаю, что я мог бы получить доступ к свойству фона стиля с помощью JavaScript как: 
document.getElementsByTagName("td").style.background="#00ff00";

но я не знаю эквивалента JavaScript для :hover. Как мне измениться эти

: наведите фон с помощью JavaScript?

ваша помощь очень ценится!

8 59
javascript html css dhtml

8 ответов:

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

var css = 'table td:hover{ background-color: #00ff00 }';
var style = document.createElement('style');

if (style.styleSheet) {
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName('head')[0].appendChild(style);
71

вы не могу изменить или изменить фактическое :hover селектор через Javascript. Однако, вы можете использовать mouseenter чтобы изменить стиль, и вернуться обратно на mouseleave (спасибо, @Bryan).

27

что вы можете сделать, это изменить класс вашего объекта и определить два класса с разными свойствами Ховер. Например:

.stategood_enabled:hover  { background-color:green}
.stategood_enabled        { background-color:black}
.stategood_disabled:hover { background-color:red}
.stategood_disabled       { background-color:black}

и это я нашел на: изменить класс элемента с помощью JavaScript

function changeClass(object,oldClass,newClass)
{
    // remove:
    //object.className = object.className.replace( /(?:^|\s)oldClass(?!\S)/g , '' );
    // replace:
    var regExp = new RegExp('(?:^|\s)' + oldClass + '(?!\S)', 'g');
    object.className = object.className.replace( regExp , newClass );
    // add
    //object.className += " "+newClass;
}

changeClass(myInput.submit,"stategood_disabled"," stategood_enabled");
7

Если это соответствует вашей цели, вы можете добавить функцию наведения без использования css и с помощью onmouseover событие в javascript

вот фрагмент кода

<div id="mydiv">foo</div>

<script>
document.getElementById("mydiv").onmouseover = function() 
{
    this.style.backgroundColor = "blue";
}
</script>
3

У меня была эта потребность один раз и создал небольшую библиотеку для, которая поддерживает документы CSS

https://github.com/terotests/css

С этим вы можете заявить

css().bind("TD:hover", {
        "background" : "00ff00"
    });

Он использует методы, упомянутые выше, а также пытается позаботиться о проблемах кросс-браузера. Если по какой-то причине существует старый браузер, такой как IE9, он ограничит количество тегов стиля, потому что более старый браузер IE имел этот странный предел для количества стилей теги на странице.

кроме того, он ограничивает трафик тегами, обновляя теги только периодически. Существует также ограниченная поддержка для создания классов анимации.

1

объявить глобальный var:

var td

затем выберите свою свинью guiena <td> получаете его id, если вы хотите изменить все из них, то

window.onload = function () {
  td = document.getElementsByTagName("td"); 
}

сделать функцию, которая будет вызвана и цикл, чтобы изменить все ваши желаемые td ' s

function trigger() {
    for(var x = 0; x < td.length; x++) { 
      td[x].className = "yournewclass"; 
    }
}

перейдите на свой лист CSS:

.yournewclass:hover { background-color: #00ff00; }

и все, с этим вы можете сделать все ваши <td> теги в background-color: #00ff00; при наведении путем изменения его CSS собственности непосредственно (переключение между классами css).

1

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

$(".hoverCell").bind('mouseover', function() {
    var old_color = $(this).css("background-color");
    $(this)[0].style.backgroundColor = '#ffff00';

    $(".hoverCell").bind('mouseout', function () {
        $(this)[0].style.backgroundColor = old_color;
    });
});

Это требует установки класса для каждой из ячеек, которые вы хотите выделить в "hoverCell".

1

Я бы рекомендовал заменить все :hover свойства :active при обнаружении, что устройство поддерживает касание. Просто вызовите эту функцию, когда вы делаете это как touch()

   function touch() {
      if ('ontouchstart' in document.documentElement) {
        for (var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
          var sheet = document.styleSheets[sheetI];
          if (sheet.cssRules) {
            for (var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
              var rule = sheet.cssRules[ruleI];

              if (rule.selectorText) {
                rule.selectorText = rule.selectorText.replace(':hover', ':active');
              }
            }
          }
        }
      }
    }
0