CODEWITHSUNDEEP
javascriptjquerycss
Mostafa Mohamed
Mostafa Mohamed

Reputation: 846

Adding css attribute hover using JQuery

I have a problem when i try to add CSS attributes to this class it gives me an error

My code 

$('.openerp .nav-pills > li.active a:hover, .openerp .nav-pills > li.active a:focus, .openerp a.list-group-item.active a:hover, .openerp a.list-group-item.active a:focus').css({'color': res["left_hover_font_color"],'background-color': res["left_hover_bg_color"]});

error:

Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: hover

Why hover causing a problem here?

Upvotes: 1

Views: 119

Answers (2)

NoobishPro
NoobishPro

Reputation: 2549

:hover is not a DOM element but a status. The css() function of jquery uses inline-css. inline-css can not be applied to a non-existing element. If you want to change your :hover class's effect, I would using .addClass() to add a class such as alternative-over and style it with css.

A way to do it with pure jQuery could also be to say:

$('a').on("hover", function(){
  $(this).css({your styles});
});

A third option is to add css between <style> tags in your DOM through jQuery, though I wouldn't recommend it as it gets messy.

edit: I will try to make an example with your specific code as you've requested, but I'm doing this blindly right now and cannot guarantee it will work right off the bat. A little tweaking might be necessary

//Specify the parents
var obj = $('.openerp .nav-pills > li.active, .openerp .nav-pills > li.active, .openerp a.list-group-item.active, .openerp a.list-group-item.active');

//This makes it grab the "a" within the objects(parents) you've specified before
    $('a', obj).on("hover", function(){
//This is what happens when you enter the area with your mouse
      $(this).css({'color': res["left_hover_font_color"],'background-color': res["left_hover_bg_color"]});
    },
function(){
  //this is what happens when your mouse leaves the area (removes the :hover)
  $(this).attr("style", ""); //resets the inline-styling
});

^ The above is a pure jQuery way. I myself would use css to get what you want. Adding and removing the class, like so;

//Specify the parents
var obj = $('.openerp .nav-pills > li.active, .openerp .nav-pills > li.active, .openerp a.list-group-item.active, .openerp a.list-group-item.active');

//This makes it grab the "a" within the objects(parents) you've specified before
    $('a', obj).on("hover", function(){
//This is what happens when you enter the area with your mouse
      $(this).addClass("alternative-hover");
    },
function(){
  //this is what happens when your mouse leaves the area (removes the :hover)
            $(this).removeClass("alternative-hover");
});

Upvotes: 1

LukasGuptaLeary
LukasGuptaLeary

Reputation: 121

JQuery selectors are similar but not exactly the same as css selectors if you want to target an event such as hover or focus you need to use a callback for example:

$('.openerp .nav-pills > li.active a').hover(function() {
    $(this).css({'color': res["left_hover_font_color"],'background-color': res["left_hover_bg_color"]});
},function() {
    $(this).css({'color': "",'background-color': ""});
});

Upvotes: 1

Related Questions