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

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

Але я не знаю еквівалента JavaScript для: hover. Як змінити фон <td>: наведення курсора за допомогою 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);
}

А потім bam, рішення, яке просто вимагає деяких функцій 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.