Изменить: наведите свойства 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?

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

59
css dhtml html javascript

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. Просто вызовите эту функцию, когда вы делаете это как 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