Question

115

How can I set a css :hover on a DOM created element in JavaScript?

rated 0 times [ 117] [ 2] / answers: 1 / hits: 18923 / 15 Years ago, fri, april 3, 2009, 12:00:00

I'm using the DOM to manage a JSON response from an AJAX function I'm running. The script I'm writing needs to be completely portable, so I am defining the styles for the created elements on the fly (meaning, no linking to an external CSS, and no providing CSS in the HTML doc itself, because I won't have control of the doc).

I'd like to create a hover effect on some of the elements.

example:

 #myDiv:hover { background:#000000; }

Is there a way to define that in the DOM? Or do I have to use mouseover?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

isaac

Add To Favorites

Follow

Total Points: 645

Total Questions: 109

Total Answers: 96

Location: Cayman Islands

Member since Fri, Mar 4, 2022

2 Years ago

answered 15 Years ago taylert · Accepted Answer

You can dynamically create and manipulate stylesheets. See here for some of the cross-browser issues with this approach.

I've got a wrapper function lying around which works around some of them; using it, the code would read

document.createStyleSheet().addRule('#myDiv:hover', 'background:#000000;');