Using jQuery to change hover pseudo

Question

SO, I don't do a whole lot of front end, and I am sure this is super simple. I just haven't been able to see an answer so far.

I have a jQuery function that triggers some CSS changes.

$(".nav-link").css({ set of changes });

But what if I want to add some properties to the hover pseudo?

I tried

$(".nav-link:hover").css({ ... });

but that doesn't seem to work.

Thanks

Do any of the answers to [this question](https://stackoverflow.com/questions/21051440/how-to-define-the-css-hover-state-in-a-jquery-selector) help? — GoldDragonTSU, Apr 24 '18 at 03:33
@GoldDragonTSU I actually saw that but was hoping there is something simpler built into jquery. I have something like that in place but it seems a little bulky for just adding a property to a class. Thanks for the hint, though. — , Apr 24 '18 at 03:36
are some of these properties preset (i.e. known)? ..where you could make a handful of css rules; and just toggle the classes vs css styles? — Napoli, Apr 24 '18 at 03:40
Please read this before posting Question https://stackoverflow.com/questions/9827095/is-it-possible-to-use-jquery-on-and-hover — jvk, Apr 24 '18 at 03:40
But see, I am not trying to add a style or even control the hover state from jquery. I am trying to add (or change) a property to a hover pseudo class that already exists in the style sheet. — , Apr 24 '18 at 11:15

score 2 · Accepted Answer · edited Apr 24 '18 at 13:52

You should apply the hover() method as a function, e.g.:

$('.nav-link').hover(function(){
  $(this).css({'background':'lightblue', 'border':'none'});
}, function(){
  $(this).css({'background':'initial', 'border':'1px solid'});
});

.nav-link {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="nav-link"></div>

Jacob Goh · Answer 2 · 2018-04-24T03:56:53.077

0

.hover function works but sometimes it's a lot easier to just be able to write the CSS directly.

This is a way i used to make it work in edge cases. (May not be a good practice.)

You can literally add any css using this way.

$('body').append('<div class="new-styles"></div>');

$('.new-styles').html(`
<style>
    a:hover {
        /* ... */
    }
    a:after {
        /* ... */
    }
</style>
`);

When you want to remove the style, just do

$('.new-styles').remove();

(I am using ES6 Template Literals in this example so that it looks cleaner. You may want to check https://caniuse.com/#search=interpolation first before using it in production.)

edited Apr 24 '18 at 03:56

answered Apr 24 '18 at 03:48

Jacob Goh

19,800
5
53
73

But see, I am not trying to add a style or even control the hover state from jquery. I am trying to add (or change) a property to a hover pseudo class that already exists in the style sheet. – Apr 24 '18 at 11:15
@aserwin the thing is, the stylesheet is not editable using Javascript. Any Javascript solution you find will just be about adding new CSS to overwrite the current CSS. For e.g. , `$(...).css({...})` is for adding inline CSS styles to selected element – Jacob Goh Apr 24 '18 at 11:49
I get that. And, I DO that in my script. I can overwrite any property (based on whatever condition) EXCEPT those in the :hover pseudo class... I feel like there should be a way. – Apr 24 '18 at 12:20
1

unfortunately, `$(...).css({...})` only works for inline styles, and it's impossible to use inline style for pseudo-selector. This SO answer will help you too https://stackoverflow.com/a/21709814/5599288 – Jacob Goh Apr 24 '18 at 13:07

Using jQuery to change hover pseudo

2 Answers2