Issue
I made a function that overwrite the the :hover
of some elements on a page. It fades between the normal and the :hover
effect. That for i had to create a .hover
class in my CSS file. I think this is a little unclean. How could i read the the :hover
pseudo class contents?
Solution
UPDATE: I somehow got this wrong. The below example doesn't work. See @bfavaretto's comment for an explanation.
In Firefox, Opera and Chrome or any other browser that correctly implements window.getComputedStyle
is very simple. You just have to pass "hover" as the second argument:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div {
display: block;
width: 200px;
height: 200px;
background: red;
}
div:hover {
background: green;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
window.onload = function () {
var div = document.getElementsByTagName("div")[0];
var style = window.getComputedStyle(div, "hover");
alert(style.backgroundColor);
};
</script>
</body>
</html>
But I don't believe there's yet a solution for Internet Explorer, except for using So, having a document.styleSheets
as Gumbo suggested. But there will be differences..hover
class is the best solution so far. Not unclean at all.
Answered By - IonuČ› G. Stan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.