[Javascript] Changing link hover through JS

Rees, Mark Mark.Rees at astrazeneca.com
Wed Jun 11 04:31:31 CDT 2008


Hello Skip

I'm a bit lost on exactly what you are trying to achieve but if you need something (anything) to change colour on mouseover, one way is to set a class for it in the CSS, and then apply that class using JS in the onmouseover event. So, for example, if you want the background colour of a given element to change when you mouseover a link. 

Note, handwritten untested code follows, but it should give you the basic idea

<style type="text/css">

.bgcolor_on{
	background-color:blue;
}
</style>

<script type="text/javascript">
var elToChange=document.getElementById('myEl');
var masterLink=document.getElementById('masterLink');
masterlink.onmouseover=function(){myEl.setAttribute('class','bgcolor_on');
						myEl.setAttribute('className','bgcolor_on');};
masterlink.onmouseout=function(){myEl.setAttribute('class','');
						myEl.setAttribute('className','');};
</script>

<h1 id="myEl">This will have a blue BG</h1>
<a href="#" id="masterLink">mouse over me</a>

Hope this helps

--------------------
Hi Skip,

    Just a few thoughts, worth every penny you paid for them:

1)  The body element can be accessed with the "document.body" syntax; no extra function should be needed.

2)  If you want to assign an event handler, you should probably call a function to do it (see http://www.javascriptkit.com/dhtmltutors/domevent1.shtml , section 2, "Via scripting").

    Of course if you have an a:hover pseudoclass set in a stylesheet, maybe you could access that class and change its color value...?  I'm not really sure how (or if) that would work, but if the above suggestions don't get you where you need to go, it might be worth a google.

HTH,

Peter

----------------------------------------

From: Skip Evans skip at bigskypenguin.com

Hey Mike & all,

What about changing the mouseover value for the 
body tag through JS? I keep seeing examples 
similar that might work, but can't seem to get any 
of them to work yet.

Right now I'm trying something like this to no avail.

Hyperlinks Hover

Any help, as always, will be appreciated to your 
wildest dreams, and then just a smidgen more.

Skip

Mike Dougherty wrote:
> On Sun, Jun 8, 2008 at 10:45 PM, Skip Evans wrote:
> 
>> But I also need to set the hover color, and for
>> the life of me can find it nowhere!!!
>>
>>
> there is technically no 'hover color' - you can set the color of an object
> to be displayed when the mouse is over it using either the :hover CSS
> selector or directly set the color in response to the mouseover event (then
> set it back on the mouseout event)
> 
> 'hope that helps. good luck on the next step :)
> _______________________________________________
> Javascript mailing list
> Javascript at lists.evolt.org
> http://lists.evolt.org/mailman/listinfo/javascript
> 

-- 
Skip Evans
Big Sky Penguin, LLC
503 S Baldwin St, #1
Madison, WI 53703
608-250-2720
http://bigskypenguin.com
=-=-=-=-=-=-=-=-=-=
Check out PHPenguin, a lightweight and versatile
PHP/MySQL, AJAX & DHTML development framework.
http://phpenguin.bigskypenguin.com/
_______________________________________________
Javascript mailing list
Javascript at lists.evolt.org
http://lists.evolt.org/mailman/listinfo/javascript


_______________________________________________
Javascript mailing list
Javascript at lists.evolt.org
http://lists.evolt.org/mailman/listinfo/javascript



More information about the Javascript mailing list