Comment puis-je supprimer :hover?

J'ai un petit problème avec un script.

Je veux avoir une action par défaut sur :hover pour les clients avec le Javascript désactivé, mais pour ceux avec Javascript activé, je veux une autre action (en fait... même action, mais je veux ajouter un petit effet de transition).

Donc... Comment puis-je faire cela? Je suis à l'aide de jQuery.

InformationsquelleAutor Ionuț Staicu | 2009-01-12
  1. 29

    Appliquer deux classes à la relvant élément. l'un contient le hover comportement, et contient tous les autres style.

    Vous pouvez ensuite utiliser le jquery 

    $(element).removeClass('hover');

    méthode pour supprimer la classe avec le hover comportement, puis appliquer tout ce que vous voulez à l'aide de 

    $(element).bind('mouseover', function () { doSomething(); });
$(element).bind('mouseout', function () { doSomething(); });
    • oui, mais cette méthode est très gênante 🙁 je veux qch pas si intrusive :-s
    • pas tout à fait sûr de ce que tu veux dire par importune?
    • j'ai modifier voie à beaucoup de code pour y parvenir. Mais... je pense que l'inverse sera trop de travail:ajout d'une classe 😀 10x (un énorme rayon de lumière au-dessus de ma tête, juste apparu!)
    InformationsquelleAutor benlumley
  2. 17

    Comment mettre de la :hover de repli dans une feuille de style qui n'est chargé que si javascript est désactivé?

    <noscript>
  <link href="noscript.css" rel="stylesheet" type="text/css" />
</noscript>
    • Grande réponse... je voudrais prendre cette.
    • Sympa, mais non valide code XHTML. <lien>-Étiquette doit être en head, <noscript> tag doit être en body. Depuis HTML5, noscript est autorisé à être en head donc le balisage HTML5 valide et ne peut pas être un problème.
    InformationsquelleAutor foxy
  3. 12

    Ici est une solution sans hack classes:

    CSS:

    a {color: blue;}
a:hover {color: red;}

    jQuery (utilise jQueryUI pour animer couleur):

    $('a').hover( 
  function() {
    $(this)
      .css('color','blue')
      .animate({'color': 'red'}, 400);
  },
  function() {
    $(this)
      .animate({'color': 'blue'}, 400);
  }
);

    démo

    • En fait, j'aime cette réponse le meilleur. C'est la seule réponse qui résout le problème à l'aide de javascript. Merci, kingjeffrey!
    InformationsquelleAutor kingjeffrey
  4. 3

    Je pense que la meilleure approche serait de laisser la :hover comportement comme une solution de repli pour les non-javascript utilisateurs et ensuite utiliser JQuery pour créer mouseover et mouseout des gestionnaires d'événements pour créer un effet différent pour le javascript est activé sur les utilisateurs.

    JQuery Javascript Library - Événements/passage de la souris

    InformationsquelleAutor Andrew Hare
  5. 2

    C'est une très vieille question, mais j'ai envie de dire que modernizr fournit une très bonne façon de mettre en œuvre ce type de réserves.

    Il suffit d'inclure modernizr dans la tête et que vous pouvez le faire:

    .no-js a:hover {
   set background color and stuff like that
   for cases when no javascript is present
}

    D'autre part, si vous voulez le faire de l'autre et de définir uniquement le css quand js est présent

    .js a:hover {
   set background color to default
   and the text decoration
}

    Il est plus ou moins la même solution que l'ajout d'une info-tag pour le balisage, mais un peu plus robuste.

    InformationsquelleAutor SoonDead
  6. 1

    J'AI TROUVÉ VOTRE SOLUTION

    fondamentalement, vous commencez par la redéfinition de ce que vous avez fait avec le css hover.
    (naturellement, vous voulez faire cela par dynamiquement en tirant les informations du style)
    puis faire ce que vous voulez en jquery avec effet de survol/mouseout événements

    cela vous permet de garder le :hover événement dans votre css parce que jquery est la liaison de votre origine des styles à l'élément. En substance, la désactivation de l' :hover événement.

    si votre css est:

    a.class {
  background-color: #000000;
  background-position: 0 0;
  }
a.class:hover {
  background-color: #ffffff;
  background-position: 100% -50px;
  }

    votre jquery serait quelque chose comme:

    jQuery("a.class").each(function () {

  var oldBackgroundColor = jQuery(this).css("backgroundColor");
  var oldBackgroundPosition = jQuery(this).css("backgroundPosition");

  jQuery(".class").css({
        'backgroundColor':oldBackgroundColor,
        'backgroundPosition':oldBackgroundPosition
  });

})
.bind("mouseover", function() {

  doSomething();

})
.bind("mouseout", function() {

  doSomething();

})
    InformationsquelleAutor Chico Web Design
  7. 0

    Vous pouvez activer globalement le comportement à travers l'ensemble du document en utilisant une seule règle css, puis de désactiver la règle dans un tableau en javascript, lors de l'installation du nouveau gestionnaire d'événements.

    Ajouter une classe à votre corps html de la balise:

    <html>
  <body class="use-hover">
  ...

    Comportement par défaut dans votre css, disons en gras liens sur le vol stationnaire:

    body.use-hover a:hover
  font-weight: bold

    Et dans votre js, quand la course va supprimer le comportement par défaut et faire autre chose:

    $(function() {
  $('body').removeClass('use-hover');
  $('a').live('mouseover', function() {
    //Do something when hovered
  }).live('mouseout', function() {
    //Do something after hover is lost
  });
});
    InformationsquelleAutor aceofspades
  8. 0

    Vous pourriez bande :hover règles de style à partir d'un document.les feuilles de style.

    Il suffit d'aller dans tous les styles CSS avec JavaScript et supprimer toutes les règles, qui contiennent ":hover" dans leur sélection. J'utilise cette méthode quand j'ai besoin de supprimer les :hover styles de bootstrap 2.

    _.each(document.styleSheets, function (sheet) { 
    var rulesToLoose = []; 
    _.each(sheet.cssRules, function (rule, index) { 
        if (rule.selectorText && rule.selectorText.indexOf(':hover') > 0) { 
            rulesToLoose.push(index);
        }
    });

    _.each(rulesToLoose.reverse(), function (index) {
        if (sheet.deleteRule) {
            sheet.deleteRule(index);
        } else if (sheet.removeRule) {
            sheet.removeRule(index);
        }
    });
});

    J'ai fait d'utiliser le trait de soulignement pour l'itération des tableaux, mais on pourrait écrire ceux avec de la pure js boucle:

    for (var i = 0; i < document.styleSheets.length; i++) {}
    InformationsquelleAutor Mikael Lepistö
  9. 0
    You can redraw element after click
function redraw(element) {
if (!element) { return; }

let n = document.createTextNode(' ');
let disp = element.style.display;  //don't worry about previous display style

element.appendChild(n);
element.style.display = 'none';

setTimeout(function(){
    element.style.display = disp;
    n.parentNode.removeChild(n);
}, 100); //you can play with this timeout to make it as short as possible

    }

    InformationsquelleAutor Artemiy StagnantIce Alexeew