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

93

Мне нужно найти способ изменить свойства 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?

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

sissypants
источник

Ответы:

110

Псевдоклассы :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);
Kennebec
источник
1
Если вы идете по этому пути, эта статья может помочь и в будущем.
Achal Dave 07
14
: hover - это псевдокласс , а не псевдоэлемент. Псевдоэлементы начинаются с двойного двоеточия, например :: after. / nitpick
Benji XVI
1
@Andi Нет, потому что styleпеременная в ответе kennebec - это новый элемент, созданный в коде и не указывающий на существующий <style>тег в HTML.
Адалин Симонян
3
Почему неизвестно, есть ли у нового styleэлемента уже таблица стилей или нет?
GreenAsJade
1
Как бы вы нашли и отредактировали текущее правило таблицы стилей, чтобы изменить его? Это показывает добавление нового правила, но что, если правило уже существует, и это всего лишь изменение значения?
GreenAsJade
44

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

Ахал Дэйв
источник
5
Неужели НЕТ способа изменить селектор: hover с помощью JavaScript?
sissypants 07
5
Обратите внимание, что вам также нужно будет выполнить привязку mouseleave, чтобы отменить эффекты.
1
Я использовал это в прошлых проектах и ​​даже недавно пробовал принятый ответ, но этот всегда преобладает, когда дело доходит до использования наведенных / активных элементов с цветными кнопками. Просто хочу сказать спасибо, что разместили это как вариант.
Jester
10

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

.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");
isgoed
источник
Разве вы не можете использовать element.classList как-то, чтобы установить класс, имеющий желаемые стили наведения?
Дэвид Спектор
6

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

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

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

<script>
document.getElementById("mydiv").onmouseover = function() 
{
    this.style.backgroundColor = "blue";
}
</script>
Намит Джунджа
источник
2
Это сохранит новый стиль и не вернется к предыдущему!
Яхья
1
@Yahya - Вы можете вернуть этот цвет обратно при отключении мыши.
Андрей Волгин
6

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

Довольно старый вопрос, поэтому я решил добавить более современный ответ. Теперь, когда переменные 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

Ибентц
источник
3

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

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

https://github.com/terotests/css

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

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

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

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

Теро Толонен
источник
2

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

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

Габриэль Барберини
источник
Я только что применил эту модель на своем веб-сайте игровой площадки SoloLearn, проверьте сами и посмотрите, как она работает: code.sololearn.com/WEtMpJ0mwFAD/#js
Габриэль Барберини
2

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

elPastor
источник
1

Вы можете создать переменную 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!

cs1349459
источник
0

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

var foo = document.getElementById("foo");
foo.addEventListener('mouseover',function(){
   foo.style.display="block";
})
foo.addEventListener('mouseleave',function(){
   foo.style.display="none";
})
Онур Алтунтас
источник
-1

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

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

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

baudo2048
источник