Изменение: наведите курсор на свойства 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 для изменения свойств при наведении курсора <td>, скажем, на background: # 00ff00. знаю, что я могу получить доступ к свойству фона стиля, используя JavaScript как:

document.getElementsByTagName("td").style.background="#00ff00";

Но я не знаю эквивалента в JavaScript для: hover. Как мне изменить фон этих <td>: hover с помощью JavaScript?

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

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

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

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

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

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

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

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

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

Извините, что обнаружил эту страницу на 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');

Довольно старый вопрос, поэтому я решил добавить более современный ответ. Теперь, когда переменные CSS широко поддерживаются, их можно использовать для достижения этой цели без необходимости в событиях JS или !important.

Взяв пример OP:

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

Теперь мы можем сделать это в CSS:

table td:hover {
  // fallback in case we need to support older/non-supported browsers (IE, Opera mini)
  background: #ff0000;
  background: var(--td-background-color);
}

И добавьте состояние зависания с помощью javascript следующим образом:

const tds = document.querySelectorAll('td');
tds.forEach((td) => {
  td.style.setProperty('--td-background-color', '#00ff00');
});

Вот рабочий пример https://codepen.io/ybentz/pen/RwPoeqb

Я бы рекомендовал заменить все :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');
              }
            }
          }
        }
      }
    }

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

https://github.com/terotests/css

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

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

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

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

Объявите глобальную переменную:

var td

Затем выберите свою морскую свинку, <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).

На самом деле это не добавление 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».

Вы можете создать переменную CSS, а затем изменить ее в JS.

:root {
  --variableName: (variableValue);
}

чтобы изменить это в JS, я сделал эти удобные маленькие функции:

var cssVarGet = function(name) {
  return getComputedStyle(document.documentElement).getPropertyValue(name);
};

а также

var cssVarSet = function(name, val) {
  document.documentElement.style.setProperty(name, val);
};

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

table td:hover {
  background: var(--variableName);
}

А потом бац, решение, которое требует лишь некоторых функций CSS и 2 JS!

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

var foo = document.getElementById("foo");
foo.addEventListener('mouseover',function(){
   foo.style.display="block";
})
foo.addEventListener('mouseleave',function(){
   foo.style.display="none";
})

Если вы используете легкий html ux lang, посмотрите здесь пример , напишите:

div root
 .onmouseover = ev => {root.style.backgroundColor='red'}
 .onmouseleave = ev => {root.style.backgroundColor='initial'}

Приведенный выше код выполняет метатег css: hover.