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? — bfavaretto
– bfavaretto, Commented Aug 21, 2013 at 19:45
Maybe that will work with the event (on)hover for such. jsfiddle.net/pDuWN — PiLHA
– PiLHA, Commented Aug 21, 2013 at 19:52

Ginja Ninja · Accepted Answer · 2013-08-21 19:56:50Z

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, 2013 at 19:56

Ginja Ninja

4151 gold badge7 silver badges16 bronze badges

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

4 Comments

Ginja Ninja Over a year ago

If you haven't looked at TinyMCE you should. It's an amazing WYSIWYG editor you can use in your projects.

David Over a year ago

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 Over a year ago

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 Over a year ago

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.

john Smith · Accepted Answer · 2013-08-21 20:01:10Z

1

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

"element1"

css :

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

edited Aug 21, 2013 at 20:01

answered Aug 21, 2013 at 19:46

john Smith

18k12 gold badges80 silver badges124 bronze badges

1 Comment

David Over a year ago

@johnSmith Sorry, this is a CSS only approach. I've clarified the question.

Collectives™ on Stack Overflow

Modifying :hover styling for an element with jQuery/javascript

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related