Accessing a:hover attribute using DOM methods?

Animesh K · Jul 9, 2007

Hello All:

I want to access CSS's a:hover background-image property using
Javascript's DOM method. The image has a name zoomin, so I was trying
something like

document.zoomin.a:hover.backgroundImage ="blah";

but it failed, as you would guess.

Can someone suggest how to access the relevant property?

Best regards,
Animesh

RobG · Jul 10, 2007

Hello All:

I want to access CSS's a:hover background-image property using
Javascript's DOM method. The image has a name zoomin, so I was trying
something like

document.zoomin.a:hover.backgroundImage ="blah";

but it failed, as you would guess.

You are trying to access a pseudo class which is a CSS selector, it is
not an attribute of the HTML element. Trying to set it via the
element is doomed. :-(

You want a selector like:

<head>
<title>Zoomin test</title>
<style type="text/css">
#foo a:hover { background-image: url('zoomin.jpg');}
</style>
</head>
<body>
<div id="foo"><a href="#">blah</a></div>
</body>

Now, if you want to use script to modify the CSS rule, try:

<URL: http://www.thescripts.com/forum/post343885-2.html >

or search the archives for something like:

"modify css stylesheet rules selector"

Animesh K · Jul 10, 2007

RobG said:
On Jul 10, 5:05 am, Animesh K <[email protected]> wrote:

You are trying to access a pseudo class which is a CSS selector, it is
not an attribute of the HTML element. Trying to set it via the
element is doomed. :-(

You want a selector like:

<head>
<title>Zoomin test</title>
<style type="text/css">
#foo a:hover { background-image: url('zoomin.jpg');}
</style>
</head>
<body>
<div id="foo"><a href="#">blah</a></div>
</body>

Now, if you want to use script to modify the CSS rule, try:

<URL: http://www.thescripts.com/forum/post343885-2.html >

or search the archives for something like:

"modify css stylesheet rules selector"

Thanks Rob! Seems there is no easy way around this issue. I wish these
things will be added in the future versions.

RobG · Jul 10, 2007

Animesh said:
Thanks Rob! Seems there is no easy way around this issue. I wish these
things will be added in the future versions.

It is already "added" via the methods used in Martin's stylesheet
manipulation code. What you are trying to manipulate is a CSS rule,
not a property of any particular element. It's the same as trying to
change a rule applied to a CSS class rather than changing the class
applied to an element.

jQuery Attribute Summit--Latest Coverage	16	Dec 20, 2009
Creating custom methods to use with HTML DOM objects	1	Jun 3, 2008
accessing vars outside of object methods	0	Jul 23, 2007
Using __abstractmethod__ with non-methods	0	Jun 16, 2011
Attribute Setting Methods	3	Jan 16, 2008
Attribute Setting Methods	3	Jan 16, 2008
Building SVG document Using DOM Interface Inside HTML Document	2	Mar 17, 2007
problem accessing variables in module	1	May 4, 2009

Accessing a:hover attribute using DOM methods?

Animesh K

RobG

Animesh K

RobG

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads