jQuery reuse of CSS-hover?

Question

If I have CSS p:hover {background-color:yellow} like this... How to do EXACTLY THE SAME THING with jQuery? No, no a complex set of function calls and property dections, but how to say to jQuery to REUSE this universal browser build-in functionality?

Note after "FAST ATTACK" closing question: se @SamuelLiew's solution operating with 1 line jQuery code, at http://jsfiddle.net/uJXLG/1/

NOTES

This question is about REUSE (of browser build-in functionality), and the sample codes are only illustrations.

Why I need jQuery (instead "pure CSS")?

The use of "pure CSS" not permit to apply logic. Examples: 1) a event that activate and deactivate the CSS houver; 2) a complex selector logic.

Reinforce

Plase, somethig simple as

$('p:hover').css('color','red'); (that NOT RUNS)...

Not say to me to use

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

that is very complex.

EDITED after @nevermind (see user's answer):

the code below is more complex (!!) than a single .addClass command, as sugested by @SamuelLiew. It is because SamuelLiew's code REUSED the browser's renderization behaviour.

var old_background; // to memorize original background

$.fn.hover_it = function(overcolor) { // TOO COMPLEX CODE AND OVERHEAD FOR DOM!!
    $(this).hover(function(){
        old_background = $(this).css("background-color");
        $(this).css("background-color",overcolor);
    },function(){
        $(this).css("background-color",old_background);
    });
}
 
$(document).ready(function() {
    $('p').hover_it('red');
});

Why do you want this in jQuery when css does it so elegantly already? — xec, Jun 05 '13 at 12:52
When I see questions like this, I just shake my head, downvote for tying to do something so daft without justification, make a snarky comment and move on. — Niet the Dark Absol, Jun 05 '13 at 12:56
PLEASE REOPEN, I thing you not understand the question, but @SamuelLiew yes (!), see http://jsfiddle.net/uJXLG/1/ to understand. — Peter Krauss, Jun 06 '13 at 12:54

score 1 · Answer 1 · answered Jun 05 '13 at 12:54

1

They way you are thinking wont work. you have to use

jQuery(selector).hover

Otherwise just put it in css.

and its not that complicated the first function is for when you enter, the second is for when you leave. Just put the code you need to run in the right one.

If you just need to change the css style of the hovered element just use css.

Otherwise you have to use the .hover function

You could use action listeners but that would just as "complicated"

answered Jun 05 '13 at 12:54

Patrick Evans

41,991
6
74
87

What is "action listeners" ? – xec Jun 05 '13 at 12:55
1

So, *event listeners*, just like .hover() **is** :) – xec Jun 05 '13 at 12:57
@xec -- yes, like hover. The "complex" function you don't want is going to be the easiest way. As Patrick said, the first function is called on mouse enter, the second on mouse leave. Not complicated :) – tymeJV Jun 05 '13 at 13:00
lol this wasnt xec's question... he was showing i was using the wrong "terminology" – Patrick Evans Jun 05 '13 at 13:06
@PatrickEvans see good solution (minial jQuery code!) at http://jsfiddle.net/uJXLG/1/ (2 comands of jQuery, adapted from S.Liew solution) and compare with incomplet and more complex nevermind code. – Peter Krauss Jun 06 '13 at 21:23

score 1 · Accepted Answer · answered Jun 05 '13 at 15:25

1

1) a event that activate and deactivate the CSS houver; 2) a complex selector logic.

In both examples mentioned above, you STILL CAN use CSS classes. Simply perform a toggleClass using jQuery for a specially-defined class that overrides the default hover functionality.

Example, you have this:

.myElement {
    color: green;
}
.myElement:hover {
    color: red;
}

Simply add this class:

.myElement.disabled {
    color: green;
}

Call .toggleClass('disabled') or .addClass('disabled') on any element that fails your logic or triggers your event.

See http://jsfiddle.net/samliew/NMmLN

answered Jun 05 '13 at 15:25

Samuel Liew

76,741
107
159
260

Thanks a lot! YES, IT IS! I put the JQuery code (your .addClass indication) into http://jsfiddle.net/uJXLG/1/ to better illustration (please, you can add this link to your answer to show the focus of the question, and we can vote to repoen the question) – Peter Krauss Jun 06 '13 at 12:52
Your answer have important clues, but something important, that I added in http://jsfiddle.net/uJXLG/1/ was "`color: inherit; cursor: auto`", that is, way to "back to default" and not interfer in the original layout. – Peter Krauss Jun 06 '13 at 12:58

score 0 · Answer 3 · edited Jun 05 '13 at 13:12

0

Here's a solution - I created a "complex" function and an example of how it's used:

$.fn.hover_it = function(over,out) { 
    $(this).hover(function(){
        $(this).css("background-color",over);
    },function(){
        $(this).css("background-color",out);
    });  
}

$(document).ready(function() {
    //usage
    $('p').hover_it('red','blue');
});

edited Jun 05 '13 at 13:12

Joe

15,205
8
49
56

answered Jun 05 '13 at 13:10

sinisake

11,240
2
19
27

Thanks, it will be good to illustrate... But for a "true illustration" you need to add logic to detect the "original background", that can be white or another one. – Peter Krauss Jun 05 '13 at 14:34
Maybe this could help to detect default color: http://stackoverflow.com/questions/5999209/jquery-how-to-get-the-background-color-code-of-an-element – sinisake Jun 05 '13 at 14:51
See the SIMPLE solution of @SamuelLiew, http://jsfiddle.net/uJXLG/1/ – Peter Krauss Jun 06 '13 at 12:55
Too complicated... css is needed... :) – sinisake Jun 06 '13 at 13:49

jQuery reuse of CSS-hover?

NOTES

Why I need jQuery (instead "pure CSS")?

Reinforce

3 Answers3