CODEWITHSUNDEEP
javascriptjquerycsshovermouseover
Julia
Julia

Reputation: 3

How to change color of element on hover and remove it when mouseout using jquery?

I found the following Snippet (color changes randomly on hover) But there is now mouseout state – i want the link color to change in its original state when not hovering the link.

Can anyone help me with this?

$(document).ready(function() {
    $( "p" ).mouseover(function() {
        $(this).css("color",getRandomColor());
    });

    function getRandomColor () {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }
})

https://jsfiddle.net/99upf1jz/

Upvotes: 0

Views: 1810

Answers (5)

Nicolai Ehemann
Nicolai Ehemann

Reputation: 574

The mouseleave event works exactly like the mouseover event. You can simply add it after the former, like this:

$( "p" ).mouseover(function() {
  $(this).css("color",getRandomColor());
}).mouseleave(function() {
    $(this).css("color", "black");
});

https://jsfiddle.net/McNetic/99upf1jz/2/

If you really want to restore the "original" color (regardless what it was), you have to save it first. That could be done with a data element to each attribute (a global variable like suggested by other answers will not restore each element to it's respective color):

$( "p" ).mouseover(function() {
  $(this).data("original-color", $(this).css("color")).css("color",getRandomColor());
}).mouseleave(function() {
    $(this).css("color", $(this).data("original-color"));
});

https://jsfiddle.net/McNetic/99upf1jz/5/

Upvotes: 0

Sankar
Sankar

Reputation: 7107

you can use mouseout...

$( "p" ).mouseleave(function() {
   $(this).css("color","#000");
});

Fiddle: https://jsfiddle.net/99upf1jz/1/

Upvotes: 1

Ben Bozorg
Ben Bozorg

Reputation: 184

Simply add this after your $("p".mouseover()...

$( "p" ).mouseout(function() {
$(this).css("color","#222222");
});

instead of #222222, put whatever colour you wish to be the original colour.

Upvotes: 0

Mohammad
Mohammad

Reputation: 21489

You can store color of element in variable before changing it and set stored color to element when mouse is un-hoverd.

var color;
$( "p" ).mouseover(function() {
    color = $(this).css("color");
    $(this).css("color", getRandomColor());
}).mouseout(function(){
    $(this).css("color", color);
});


var color;
$( "p" ).hover(function() {
    color = $(this).css("color");
    $(this).css("color", getRandomColor());
}, function(){
    $(this).css("color", color);
});

function getRandomColor () {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>test</p>
<p>test1</p>

Upvotes: 0

Jesse Elser
Jesse Elser

Reputation: 976

Use mouseleave to apply a color when the mouse pointer moves from the link. Just change the #000 to whichever color you choose.

$(document).ready(function() {
$( "p" ).mouseover(function() {
$(this).css("color",getRandomColor());
});
$("p").mouseleave(function(){
       $(this).css("color","#000");
});

function getRandomColor () {
 var letters = '0123456789ABCDEF'.split('');
 var color = '#';
 for (var i = 0; i < 6; i++) {
     color += letters[Math.floor(Math.random() * 16)];
 }
 return color;
    }
})

mouseleave appears to be a more reliable solution for what you ask in comparison to mouseout.

See this site for a comparison: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseleave_mouseout

Upvotes: 0

Related Questions