Modifying :hover styling for an element with jQuery/javascript

Question

I am building a WYSIWYG page styling editor with jquery/javascript. I'm trying to provide a way to modify the :hover state of links so my users can change the color, size, weight, etc of links. I know how to apply styling to elements for their default state, but can't find any documentation on how to apply styling to an element :hover state.

Any help out there?

To currently apply anything I am doing the following:

$('#content a').css('color','#ffcc00');

I need to do something similar for a:hover. ie:

$('#content a:hover').css('color','#000');

possible duplicate of [How do you add pseudo classes to elements using jQuery?](http://stackoverflow.com/questions/12740967/how-do-you-add-pseudo-classes-to-elements-using-jquery) — bfavaretto, Aug 21 '13 at 19:45
Maybe that will work with the event (on)hover for such. http://jsfiddle.net/pDuWN/ — PiLHA, Aug 21 '13 at 19:52

john Smith · Answer 1 · 2013-08-21T20:01:10.137

1

you can use css like assert your element´s id is

"element1"

css :

#element1:hover {
    background-color:pink;
}

edited Aug 21 '13 at 20:01

answered Aug 21 '13 at 19:46

john Smith

17,409
11
76
117

@johnSmith Sorry, this is a CSS only approach. I've clarified the question. – David Aug 21 '13 at 20:10

score 1 · Accepted Answer · answered Aug 21 '13 at 19:56

1

If you want to make the change using javascript you can attach it to jQuery.hover(). Here's a full working example

$('a.link').hover(
       function(){

            $(this).css('color',$('input').val());
       }
     );

I built a WYSIWYG editor and I store the user defined settings in a db so instead of reloading the page after I save their change to the form I update the behavior with javascript.

answered Aug 21 '13 at 19:56

Ginja Ninja

395
1
6
15

If you haven't looked at TinyMCE you should. It's an amazing WYSIWYG editor you can use in your projects. – Ginja Ninja Aug 21 '13 at 19:58
Just have a go at your answer to see if it does the job. I'm aware of TinyMCE, but this is a bit more complex of a project. The question is a simplified version of the actual project (WYSIWYG template builder). storing the styling in the db was the plan :) – David Aug 21 '13 at 19:59
Hm, it's pretty damn close. Hover doesn't switch off. I really don't want to go down the class route as I'll be dynamically creating the CSS. – David Aug 21 '13 at 20:05
This is the closest answer. Couple of changes I did: 'a.link' to 'a' and added a second function(){} for when a user mouses out. – David Aug 21 '13 at 20:22

Modifying :hover styling for an element with jQuery/javascript

2 Answers2