Alteração: passe o mouse sobre as propriedades CSS com JavaScript

Preciso encontrar uma maneira de alterar as propriedades CSS: hover usando JavaScript.

Por exemplo, suponha que eu tenha este código HTML:

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

E o seguinte código CSS:

table td:hover {
background:#ff0000;
}

Eu gostaria de usar JavaScript para alterar as propriedades de foco <td> para, digamos, background: # 00ff00. sei que poderia acessar a propriedade de fundo de estilo usando JavaScript como:

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

Mas não conheço um equivalente em JavaScript para: hover. Como altero estes <td>: fundo de foco usando JavaScript?

Sua ajuda é muito apreciada!

Pseudo classes como :hovernunca se referem a um elemento, mas a qualquer elemento que satisfaça as condições da regra da folha de estilo. Você precisa editar a regra da folha de estilo , anexar uma nova regra ou adicionar uma nova folha de estilo que inclua a nova :hoverregra.

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

Você não pode alterar ou alterar o :hoverseletor real por meio de Javascript. Você pode, entretanto, usar mouseenterpara mudar o estilo e voltar mouseleave(obrigado, @Bryan).

O que você pode fazer é alterar a classe do seu objeto e definir duas classes com diferentes propriedades de foco. Por exemplo:

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

E eu descobri em: Alterar a classe de um elemento com 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");

Desculpe por encontrar esta página 7 anos tarde demais, mas aqui está uma maneira muito mais simples de resolver este problema (alterando estilos de flutuação arbitrariamente):

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

Se for adequado ao seu objetivo, você pode adicionar a funcionalidade de foco sem usar css e usar o onmouseoverevento em javascript

Aqui está um snippet de código

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

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

Uma pergunta bem antiga, então decidi adicionar uma resposta mais moderna. Agora que as variáveis ​​CSS são amplamente suportadas, elas podem ser usadas para conseguir isso sem a necessidade de eventos JS ou !important.

Tomando o exemplo do OP:

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

Agora podemos fazer isso no 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);
}

E adicione o estado de foco usando javascript assim:

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

Aqui está um exemplo funcional https://codepen.io/ybentz/pen/RwPoeqb

Eu recomendo substituir todas as :hoverpropriedades para :activequando você detectar que o dispositivo suporta toque. Basta chamar esta função quando fizer isso comotouch()

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

Tive essa necessidade uma vez e criei uma pequena biblioteca para, que mantém os documentos CSS

https://github.com/terotests/css

Com isso você pode afirmar

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

Ele usa as técnicas mencionadas acima e também tenta cuidar dos problemas entre navegadores. Se por algum motivo existir um navegador antigo como o IE9, ele limitará o número de tags STYLE, porque o navegador IE mais antigo tinha esse limite estranho para o número de tags STYLE disponíveis na página.

Além disso, limita o tráfego para as tags atualizando as tags apenas periodicamente. Também existe um suporte limitado para a criação de classes de animação.

Declare uma var global:

var td

Em seguida, selecione seu porco guiena <td>pegando-o pelo seu id, se você quiser alterar todos eles então

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

Faça uma função a ser acionado e um loop para mudar todos os seus desejados tds'

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

Vá para sua folha CSS:

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

E é isso, com isso você pode fazer com que todas as suas <td>tags recebam um background-color: #00ff00;quando pairado, alterando sua propriedade css diretamente (alternando entre as classes css).

Na verdade, isso não é adicionar o CSS à célula, mas dá o mesmo efeito. Embora forneça o mesmo resultado que as outras acima, esta versão é um pouco mais intuitiva para mim, mas sou um novato, então faça o que vale:

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

Isso requer a configuração da Classe para cada uma das células que deseja destacar como "hoverCell".

Você pode criar uma variável CSS e alterá-la em JS.

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

para alterá-lo em JS, criei estas pequenas funções úteis:

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

e

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

Você pode criar quantas variáveis ​​CSS quiser e não encontrei nenhum erro nas funções; Depois disso, tudo que você precisa fazer é incorporá-lo ao seu CSS:

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

E então bam, uma solução que requer apenas algumas funções CSS e 2 JS!

Você pode usar eventos de mouse para controlar como o foco. Por exemplo, o código a seguir torna-se visível quando você passa o mouse sobre esse elemento.

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

Se você usar html leve ux lang, veja aqui um exemplo , escreva:

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

O código acima executa a metatag css: hover.