Helpful Information
 
 
Category: DOM and JSON scripting
The a:hover object

Is there a way to access the color of hover links in a function? In other words, what is the DOM path to change it (eg. document.links.hover.color ?????)

hi,

you can change it using getElementById as part of w3c DOM

tested in IE6
will not work in nn4.7 for sure. for the rest who knows :)



<html>

<head>
<style>#somelink</style>

<script>
var clr;
function changeColor (flag) {

if (flag == 1)
{

for (i=0;i<3;i++)
{
if (document.frm.c[i].checked == true)
{
clr = document.frm.c[i].value;
document.getElementById("somelink").style.color = clr;
}
}
}
else
{
document.getElementById("somelink").style.color = "black" }
}

</script>


</head>

<body>
<a href ="http://" id ="somelink" onMouseover ="changeColor(1)"
onMouseout ="changeColor(0)"
>Link to stuff</a>
<br><br>
<form name ="frm">
green<input type = "radio" name = c value ="green"><br>
yellow<input type = "radio" name = c value ="yellow"><br>
orange<input type = "radio" name = c value ="orange"><br>
</form>
</body>

</html>

A.

document.defaultView.getComputedStyle(refToAnchor, 'hover').getPropertyValue('color');

That should provide a read-only version of the color generated during a hover event. (In theory at least in Gecko browsers, though initial testing shows otherwise?)

Until Mozilla implements the OverrideStyle defined in DOM2 CSS, which would look like:
document.getOverrideStyle(refToAnchor, 'hover').setProperty('color', 'newcolor', '');


I believe you'll need to actually navigate through the CSSRule's until:

document.styleSheets.item(0).cssRules.item(x).selectorText

contains the string ":hover", from which you can then say:

document.styleSheets.item(0).cssRules.item(x).style.color = 'newcolor';


Keep in mind this is all Mozilla-only. IE has its own proprietary implementation of navigating through CSS rules, but to give it credit, it is remarkably similar to the standards in some ways,

thank you both very much! very helpful!










privacy (GDPR)