jQuery to update actual CSS

Question

First off: I'm aware of the jQuery.css() function, but it doesn't work in my case. I'll explain why.

I have a jQuery color picker being used to change the highlighting of a website. I want to apply that color picker to the border of an element which only shows on hover.

The jQuery.css() function only applies the CSS to elements it finds, and does not work on the :hover CSS attribute.

I've tried adding a CSS class which I toggle on the hover, but it comes back to the same problem: I'm trying to change ONLY the hover value.

There's got to be a way to do this, but I've been searching StackOverflow and Google for the better part of an hour now, so I'm invoking xkcd #627

Have you tried using the hover event? http://api.jquery.com/hover/ — Binary Alchemist, Jan 08 '14 at 01:47
Yes, but where do I apply it? If I put the code in the updateColor(color) function (which gets called when you change the color picker) then it applies the color even once you stopped hovering. — Bing, Jan 08 '14 at 01:50
If my answer doesn't explain everything, please provide your code for the color picker. — Binary Alchemist, Jan 08 '14 at 01:53

Binary Alchemist · Accepted Answer · 2014-01-08T01:56:37.100

4

Use the hover event to achieve the same results.

$('selector').hover( function(){
    //A function to execute when the mouse pointer enters the element.
    $(this).css('property','value');
}, function(){
    //A function to execute when the mouse pointer leaves the element.
    $(this).css('property','value');
});

edited Jan 08 '14 at 01:56

answered Jan 08 '14 at 01:50

Binary Alchemist

1,600
1
13
28

handlerIn/handlerOut gave me a Javascript error, but you gave me the idea to use .mouseover and .mouseleave instead, which works! Thank you! – Bing Jan 08 '14 at 01:55
@Bing I removed handlerIn/handlerOut which fixes the error. $( selector ).hover is identical to $( selector ).mouseenter( handlerIn ).mouseleave( handlerOut ); so its preference which one you use. – Binary Alchemist Jan 08 '14 at 01:58
Awesome, thanks for the great info (and quick response)! – Bing Jan 08 '14 at 01:59

score 0 · Answer 2 · answered Jan 08 '14 at 02:14

I'm adding this as an alternative answer.

If you need to dynamically change your CSS then there is something wrong with your CSS. It's very strange that you need a definition, that you can't toggle with a class and has to be generated dynamically.

Let's say you have a widget that can be in two modes: inactive or active. When it's active elements in it should respond visually to a hover event, when it's not, they shouldn't.

<div id="my-widget" class="my-widget-container">
    <div class="element">Something to look at</div>
</div>

CSS

.my-widget-container .element { background-color: #ffffff; }
.my-widget-container.active .element:hover { background-color: #00ff00; }

You switch the mode by:

$("#my-widget").addClass("active");

This will activate the :hover line for the element which now appears interactive.

If I knew more about your situation I could perhaps fix a fitting solution.

Also, jQuery.css is poorly named, perhaps jQuery.style would be a better name since that is exactly what it does.

The problem with this is that the `background-color` on the `:hover` needed to dynamically changed via the Javascript color picker. There's still a good chance I did something wrong, but that's why I didn't see adding a new CSS class as the answer. (Here is my color picker, by the way: http://bgrins.github.io/spectrum/) — Bing, Jan 08 '14 at 04:12

jQuery to update actual CSS

2 Answers2

Linked