Jquery: Hover/unhover combiné avec le flou/focus

J'ai été à la recherche à travers les questions, mais je ne trouve pas exactement ce que je cherche..

Je veux savoir comment faire une fonction qui effectue les opérations suivantes:

  1. Si vous placez un élément de l'élément
    changements au bleu par exemple
  2. Si vous unhover il des modifications à
    par défaut
  3. Si vous cliquez sur (mise au point), il garde
    la couleur bleue de l'effet hover
    même si vous unhover il
  4. Si vous cliquez à l'extérieur (flou), il va
    retour à la valeur par défaut de la couleur et de la
    mouseover effet fonctionne de nouveau

Comment puis-je le faire ;)?

OriginalL'auteur donpedroper | 2011-03-25

  1. 10

    Mise à jour : ne pas utiliser jQuery.

    Plaine CSS solution :

    <input type="text" value="Test Element" id="test"/>

<style>
    #test:hover, #test:focus { color: blue; }
</style>

    jsFiddle démo ici : https://jsfiddle.net/ngkybcvz/

    À l'aide de différentes classes CSS pourrait être une solution.

    .elementHovered { color : blue; }
.elementFocused { color : blue; }


<input type="text" value="Test Element" id="test"/>

$("#test").hover(function() {
    $(this).addClass("elementHovered");
}, function() {
    $(this).removeClass("elementHovered");
});


$("#test").focus(function() {
    $(this).addClass("elementFocused");
});

$("#test").blur(function() {
    $(this).removeClass("elementFocused");
});

    jsFiddle démo ici : http://jsfiddle.net/ZRADe/

    Hm. Vous devriez mettre le contenu de ce violon, trop.
    Mauvais lien copié / collé. J'ai mis le contenu ici
    Je n'avais pas pensé à la possibilité d'utiliser deux classes différentes pour planer et de la concentration, mais cela fonctionne très bien - merci 😉

    OriginalL'auteur Sylvain

  2. 1

    Dépend de ce que les éléments que vous souhaitez utiliser, si vous le faites pour les entrées, je recommande d'utiliser un focusin, focusout à la place.

    Mais il ressemblerait à quelque chose comme ça.

    $(document).ready(function() {
    $("li").hover(
    function () {
        $(this).addClass('.blue');
    }, 
    function () {
        $(this).removeClass('.blue');
    }
    );

    $("li").click(function() {
        $("li").removeClass('.blue');
        $(this).addClass('.blue');
    });

});

    OriginalL'auteur ApPeL

  3. 0

    Je voudrais juste mettre un drapeau et ensuite, demandez à chaque fonction de faire comme vous le souhaitez.

    donc hover ne marche pas ensemble le drapeau et agit comme normal, en changeant d'avant en arrière. mais la deuxième fonction en vol stationnaire, les unhover ne serait pas revenir à la valeur par défaut si le drapeau est réglé, qui serait fixé par le clic, et retirés par le flou...

    JQUERY HOVER:

    http://api.jquery.com/hover/

    OriginalL'auteur trgraglia

  4. 0

    Vos 3 premiers exigences sont simples. 1 + 2 sont facile à faire avec CSS et l' :placez le sélecteur de

    Pour 3 vous auriez besoin de changer la classe de l'élément à l'aide de JQuery comme

    $('#MyElement').removeClass('RegularClass');
$('#MyElement').addClass('SelectedClass');

    Comme pour votre 4ème exigence, vous voudrez peut-être avoir un coup d'oeil à JQuery événement focusout peut atteindre, ce que vous avez besoin.

    OriginalL'auteur cusimar9

  5. 0

    1 et 2: Utilisation de CSS.

    comme:

    En CSS(floue est la classe de base):

    .blurry{background:red;}
.blurry:hover{background:blue;}
.focused{background:blue;}

    EN js:

    $(document).ready(function() {
    $('#elementID').focus($(this).addClass('focused').removeClass('blurry');)
    });)
    $('#elementID').blur($(this).addClass('blurry').removeClass('focused');)
});

    Le CSS va prendre soin de la souris /mouseout événements sans avoir à interagir avec les DOM.
    Et la js fait le reste 🙂

    OriginalL'auteur Guidhouse

  6. 0

    J'ai essayé de faire quelque chose de très similaire avec un div et c'est ce qui fonctionne le mieux pour moi:

    var focusColor = "#008BFF";
var hoverColor = "#6FBEFF";

var clicked = false;

elem.focusin(
   function () {
       clicked = true;
       elem.css({ "border-color": focusColor });
   }
);

elem.focusout(
   function () {
       clicked = false;
       elem.css({ "border-color": "" });
   }
);

elem.hover(
   function () {
       if (clicked) {
           elem.css({ "border-color": focusColor });
       }
       else {
           elem.css({ "border-color": hoverColor });
       }
   },
   function () {
       if (clicked) {
           elem.css({ "border-color": focusColor });
       }
       else {
           elem.css({ "border-color": "" });
       }
   }
);

    OriginalL'auteur Ellen