2

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

Improve this question
5
  • Do any of the answers to this question help? Commented Apr 24, 2018 at 3: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. Commented Apr 24, 2018 at 3:36
  • 1
    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? Commented Apr 24, 2018 at 3:40
  • Please read this before posting Question stackoverflow.com/questions/9827095/… Commented Apr 24, 2018 at 3: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. Commented Apr 24, 2018 at 11:15

2 Answers 2

Reset to default
2

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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

Improve this answer

4 Comments

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.
@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
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.
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 stackoverflow.com/a/21709814/5599288

Your Answer

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