Zmiana: najedź na właściwości CSS za pomocą JavaScript

Muszę znaleźć sposób na zmianę CSS: właściwości najechania kursorem przy użyciu JavaScript.

Na przykład załóżmy, że mam taki kod HTML:

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

I następujący kod CSS:

table td:hover {
background:#ff0000;
}

Chciałbym użyć JavaScript do zmiany właściwości <td> hover na, powiedzmy, background: # 00ff00. wiem, że mogę uzyskać dostęp do właściwości tła stylu za pomocą JavaScript jako:

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

Ale nie znam odpowiednika JavaScript dla: hover. Jak zmienić te <td>: hover background za pomocą JavaScript?

Twoja pomoc jest bardzo cenna!

Pseudoklasy jak :hovernigdy nie odnoszą się do elementu, ale do każdego elementu, który spełnia warunki reguły arkusza stylów. Musisz edytować regułę arkusza stylów , dołączyć nową regułę lub dodać nowy arkusz stylów zawierający nową :hoverregułę.

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

Nie możesz zmienić ani zmienić rzeczywistego :hoverselektora za pomocą JavaScript. Możesz jednak użyć, mouseenteraby zmienić styl i powrócić mouseleave(dzięki, @Bryan).

Możesz zmienić klasę swojego obiektu i zdefiniować dwie klasy z różnymi właściwościami aktywowania. Na przykład:

.stategood_enabled:hover  { background-color:green}
.stategood_enabled        { background-color:black}
.stategood_disabled:hover { background-color:red}
.stategood_disabled       { background-color:black}

I to znalazłem na: Zmień klasę elementu za pomocą 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");

Jeśli pasuje do Twojego celu, możesz dodać funkcję hover bez używania css i używania onmouseoverzdarzenia w javascript

Oto fragment kodu

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

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

Przepraszamy, że ta strona jest za późno o 7 lat, ale tutaj jest znacznie prostszy sposób rozwiązania tego problemu (dowolna zmiana stylów najechania kursorem):

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');

Dość stare pytanie, więc pomyślałem, że dodam bardziej nowoczesną odpowiedź. Teraz, gdy zmienne CSS są szeroko obsługiwane, można ich użyć do osiągnięcia tego bez potrzeby zdarzeń JS lub!important .

Biorąc przykład PO:

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

Teraz możemy to zrobić w 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);
}

I dodaj stan najechania za pomocą javascript w następujący sposób:

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

Oto działający przykład https://codepen.io/ybentz/pen/RwPoeqb

Polecam zastąpić wszystkie :hoverwłaściwości, :activegdy wykryjesz, że urządzenie obsługuje dotyk. Po prostu wywołaj tę funkcję, gdy zrobisz to jakotouch()

   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');
              }
            }
          }
        }
      }
    }

Kiedyś miałem taką potrzebę i stworzyłem małą bibliotekę, która obsługuje dokumenty CSS

https://github.com/terotests/css

Dzięki temu możesz stwierdzić

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

Korzysta z wyżej wymienionych technik, a także stara się rozwiązać problemy z różnymi przeglądarkami. Jeśli z jakiegoś powodu istnieje stara przeglądarka, taka jak IE9, ograniczy liczbę tagów STYLE, ponieważ starsza przeglądarka IE miała ten dziwny limit liczby tagów STYLE dostępnych na stronie.

Ponadto ogranicza ruch do tagów, aktualizując tagi tylko okresowo. Istnieje również ograniczona obsługa tworzenia klas animacji.

Zadeklaruj zmienną globalną:

var td

Następnie wybierz świnkę guiena, <td>aby ją zdobyć id, jeśli chcesz zmienić je wszystkie

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

Zrób funkcję być wyzwalany i pętlę do zmiany wszystkich żądanych td„s

function trigger() {
    for(var x = 0; x < td.length; x++) { 
      td[x].className = "yournewclass"; 
    }
}

Przejdź do arkusza CSS:

.yournewclass:hover { background-color: #00ff00; }

I to jest to, dzięki temu możesz sprawić, że wszystkie <td>tagi otrzymają znak background-color: #00ff00;po najechaniu kursorem, zmieniając bezpośrednio ich właściwość css (przełączając się między klasami css).

W rzeczywistości nie jest to dodawanie CSS do komórki, ale daje ten sam efekt. Zapewniając ten sam wynik, co inne powyżej, ta wersja jest dla mnie nieco bardziej intuicyjna, ale jestem nowicjuszem, więc weź to za to, co warto:

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

Wymaga to ustawienia klasy dla każdej komórki, którą chcesz wyróżnić, na „hoverCell”.

Możesz utworzyć zmienną CSS, a następnie zmienić ją w JS.

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

aby to zmienić w JS, stworzyłem te przydatne małe funkcje:

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

i

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

Możesz utworzyć dowolną liczbę zmiennych CSS, a nie znalazłem żadnych błędów w funkcjach; Potem wszystko, co musisz zrobić, to osadzić go w swoim CSS:

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

A potem bam, rozwiązanie, które wymaga tylko kilku funkcji CSS i 2 funkcji JS!

Możesz używać zdarzeń myszy do sterowania, takich jak najechanie kursorem. Na przykład poniższy kod staje się widoczny po umieszczeniu wskaźnika myszy nad tym elementem.

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

Jeśli używasz lekkiego html ux lang, sprawdź tutaj przykład , napisz:

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

Powyższy kod wykonuje metatag css: hover.