Posso desativar um efeito CSS: hover via JavaScript?

Estou tentando impedir que o navegador use o efeito :hover do CSS, via JavaScript.

Eu configurei os estilos a e a:hover no meu CSS, porque quero um efeito de foco, se o JS não estiver disponível. Mas se JS estiver disponível, quero replace meu efeito de foco do CSS por um mais suave (usando o plug-in de colors jQuery, por exemplo).

Eu tentei isso:

 $("ul#mainFilter a").hover( function(e){ e.preventDefault(); ...do my stuff... }, function(e){ e.preventDefault(); ...do my stuff... }); 

Eu também tentei com return false; , mas não funciona.

Aqui está um exemplo do meu problema: http://jsfiddle.net/4rEzz/ . O link deve desaparecer sem ficar cinza.

Como mencionado por fudgey, uma solução alternativa seria redefinir os estilos de hover usando .css() mas eu teria que replace todas as propriedades, especificadas no CSS (veja aqui: http://jsfiddle.net/raPeX/1/ ) . Eu estou procurando uma solução genérica.

Alguém sabe como fazer isso?

PS: Eu não quero sobrescrever todos os estilos que defini para o foco.

Não há uma solução genérica de JavaScript pura, receio. O JavaScript não pode desativar o próprio estado do CSS :hover .

Você poderia tentar a seguinte alternativa alternativa embora. Se você não se importa em usar HTML e CSS um pouco, você não precisa redefinir cada propriedade CSS manualmente via JavaScript.

HTML

  

CSS

 /* Limit the hover styles in your CSS so that they only apply when the nojQuery class is present */ body.nojQuery ul#mainFilter a:hover { /* CSS-only hover styles go here */ } 

JavaScript

 // When jQuery kicks in, remove the nojQuery class from the  element, thus // making the CSS hover styles disappear. $(function(){} $('body').removeClass('nojQuery'); ) 

Você pode manipular as folhas de estilo e as regras da folha de estilo com o javascript

 var sheetCount = document.styleSheets.length; var lastSheet = document.styleSheets[sheetCount-1]; var ruleCount; if (lastSheet.cssRules) { // Firefox uses 'cssRules' ruleCount = lastSheet.cssRules.length; } else if (lastSheet.rules) { / /IE uses 'rules' ruleCount = lastSheet.rules.length; } var newRule = "a:hover { text-decoration: none !important; color: #000 !important; }"; // insert as the last rule in the last sheet so it // overrides (not overwrites) previous definitions lastSheet.insertRule(newRule, ruleCount); 

Tornar os atributos importantes e fazer dessa a última definição de CSS deve replace qualquer definição anterior, a menos que uma seja mais especificamente direcionada. Você pode ter que inserir mais regras nesse caso.

Isso é semelhante à resposta de aSeptik, mas e essa abordagem? Quebra o código CSS que você deseja desabilitar usando JavaScript em tags . Dessa forma, se javaScript estiver desativado, o CSS :hover será usado, caso contrário, o efeito JavaScript será usado.

Exemplo:

   

Apenas uma resposta mais curta …

Use uma segunda class que tenha apenas o hover atribuído:

HTML

  My anchor 

CSS

  .myclass { /* all anchor styles */ } .myclass_hover:hover { /* example color */ color:#00A; } 

Agora você pode usar o Jquery para remover a class, por exemplo, se o elemento foi clicado:

JQUERY

  $('.myclass').click( function(e) { e.preventDefault(); $(this).removeClass('myclass_hover'); }); 

Espero que esta resposta seja útil.

Eu usaria CSS para evitar que o evento: hover altere a aparência do link.

 a{ font:normal 12px/15px arial,verdana,sans-serif; color:#000; text-decoration:none; } 

Este CSS simples significa que os links serão sempre pretos e não sublinhados. Não posso dizer pela pergunta se a mudança na aparência é a única coisa que você quer controlar.

Eu usei o operador addClass() function addClass() do jQuery. Aqui está um exemplo, quando você clica em um item da lista, ele não vai mais passar:

Por exemplo:

HTML

 
  • Onion
  • Potato
  • Lettuce

    CSS

     .vegies li:not(.no-hover):hover { color: blue; } 

    jQuery

     $('.vegies li').click( function(){ $(this).addClass('no-hover'); }); 

    Tente apenas definir a cor do link:

     $("ul#mainFilter a").css('color','#000'); 

    Edit: ou melhor ainda, use o CSS, como Christopher sugeriu

    Na verdade, uma outra maneira de resolver isso seria sobrescrevendo o CSS com insertRule .

    Ele permite injetar regras CSS em uma nova folha de estilos existente. No meu exemplo concreto, ficaria assim:

     //creates a new `style` element in the document var sheet = (function(){ var style = document.createElement("style"); // WebKit hack :( style.appendChild(document.createTextNode("")); // Add the  

    Demonstração com meu exemplo original de 4 anos: http://jsfiddle.net/raPeX/21/

    Eu recomendo replace todas as propriedades :hover para :active quando você detecta que o dispositivo suporta toque. Apenas chame esta function quando você fizer isso como 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'); } } } } } }