[jQuery] get hover, focus color
I wanted to create test page to display all states of the link (link,
hover, focus, active, visited).
How to get styles of these states?
The code below illustrates what I'm trying to achieve:
It does not work for a:hover,
but if you change a:hover to a, it's OK.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8" />
<title>Navtest</title>
<link rel="stylesheet" type="text/css" href="screen.css" />
<script type="text/javascript" src="http://
jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
$(function() {
var color = $('a:hover').eq(0).css('color');
alert(color);
$('.hovered').css('color', color);
})
/*]]>*/
</script>
</head>
<body id="index">
<div id="page-container">
<h1 id="main">Navtest</h1>
<ul>
<li><a href="#">test link</a></li>
<li><a class="hovered" href="#">test link hover</a></li>
</ul>
</div>
</body>
</html>