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

Ответ 1

Псевдо классы, такие как :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);

Ответ 2

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

Ответ 3

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

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

Ответ 4

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

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

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

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

Ответ 5

Это на самом деле не добавляет 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".

Ответ 6

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

https://github.com/terotests/css

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

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

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

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

Ответ 7

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

var td

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

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

Сделайте функцию, которая будет запущена, и цикл, чтобы изменить все требуемые td '

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).

Ответ 8

Я бы рекомендовал заменить все свойства :hover на :active, когда вы обнаружите, что устройство поддерживает touch. Просто вызовите эту функцию, когда вы сделаете это как 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');
              }
            }
          }
        }
      }
    }

Ответ 9

Извините, что нашел эту страницу на 7 лет позже, но вот гораздо более простой способ решения этой проблемы (произвольное изменение стилей наведения):

HTML:

<button id=Button>Button Title</button>

CSS:

.HoverClass1:hover {color: blue !important; background-color: green !important;}
.HoverClass2:hover {color: red !important; background-color: yellow !important;}

JavaScript:

var Button=document.getElementById('Button');
/* Clear all previous hover classes */
Button.classList.remove('HoverClass1','HoverClass2');
/* Set the desired hover class */
Button.classList.add('HoverClass1');