7

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

6 Answers 6

11

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/

3
  • Hm. You should put content in that fiddle, too.
    – Boldewyn
    Mar 25, 2011 at 9:50
  • Wrong link copy / pasted. I've put the content here
    – Sylvain
    Mar 25, 2011 at 9:52
  • I didn't think of the possibility to use two different classes for hover and focus, but this works great - thanks ;)
    – user653522
    Mar 25, 2011 at 10:15
1

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

});
0

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/

0

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.

0

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

0
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.