Jquery: Hover/unhover combined with blur/focus

I've been looking through the questions, but i can't find exactly what i'm looking for..

I want to know how to make a function that does the following:

1. If you hover an element the element changes to blue for example
2. If you u开发者_JS百科nhover it changes back to default
3. If you click it (focus), it keeps the blue color from the hover effect even if you unhover it
4. If you click away (blur), it goes back to the default color and the mouseover effect works again

How do I do so ;)?

Update : don't use jQuery.

Plain CSS solution :

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

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

jsFiddle demo here : https://jsfiddle.net/ngkybcvz/

Using different CSS classes could be a 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 demo here : http://jsfiddle.net/ZRADe/

Depends what elements you want to use, if you are doing it for inputs, I recommend using a focusin, focusout instead.

But it would look something like this.

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

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

});

I would just set a flag and then have each function do as you wish.

so hover doesnt set the flag and acts like normal, changing back and forth. but the second function in hover, the unhover function would not change back to default if the flag is set which would be set by the click and unset by the blur...

JQUERY HOVER:

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

Your first 3 requirements are straightforward. 1 + 2 are easy to do with CSS only and the :hover selector

For 3 you would need to change the class of the element using JQuery like so

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

As for your 4th requirement, you may want to have a look at JQuery's focusout event which may achieve what you need.

1 and 2: Use CSS.

like:

In CSS(blurry is base class):

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

IN js:

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

The CSS will take care of the mouseover / mouseout events without you having to interact with the DOM. And the js does the rest :)

I was trying to do something very similar with a div and this is what worked best for me:

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": "" });
       }
   }
);