...

View Full Version : CSS :hover{background-color} ignored after javascript function?



diafygi
02-12-2007, 09:42 PM
Hello all,

When I change a background color in javascript, IE6 (I don't know about FF) is ignoring my previous hover property for background color. This is strange because the text-decoration still works. Can someone explain this? Is there any way I can manipulate hover properties in javascript? Here is some example code (try it yourself):



<html>
<head>
<style>
a.cat {text-decoration:none;padding:4px;background:yellow;}
a.cat:hover {text-decoration:underline;background:pink;}
</style>

<script type="text/javascript">
function test(n)
{
switch (n)
{
case 1: document.getElementById("cat1").style.background="red";
document.getElementById("cat2").style.background="yellow";
break;
case 2: document.getElementById("cat1").style.background="yellow";
document.getElementById("cat2").style.background="red";
break;
}
}
</script>
</head>
<body>
<a href="javascript:test(1)" id="cat1" class="cat">Cat1</a>
<a href="javascript:test(2)" id="cat2" class="cat">Cat2</a>
</body>
</html>


Thanks!

MikeFoster
02-12-2007, 10:20 PM
Hi diafygi, Welcome to Coding Forums!

I think it has to do with "specificity".

Just add/remove a className on the element. For example toggle element.className between 'cat' and 'catNew':


<style>
a.cat {text-decoration:none;padding:4px;background:yellow;}
a.cat:hover {text-decoration:underline;background:pink;}

a.catNew {text-decoration:none;padding:4px;background:red;}
a.catNew:hover {text-decoration:underline;background:white;}
</style>

kuerwen
02-12-2007, 10:31 PM
IE has some disappearing background bugs as well and this may be one. Try googling "IE bugs" or similar and see if that bug is listed.

Arbitrator
02-13-2007, 05:30 AM
I don't know about FFThis is happening in Firefox too.


This is strange because the text-decoration still works. Can someone explain this?I think MikeFoster is right about specificity. CSS declarations with greater specificity take precedence over those with lower specificity. One type of specificity relates to how styles are defined:


Inline via style attribute. These have the greatest specificity. Example: <a style="background-color: red;"></a>.
Embedded via style element. These have lower specificity than the inline style references. Example: <style type="text/css">a { background-color: red; }</style>.
To understand why this is relevant, the following two sets of code are essentially equivalent (in this context):


document.getElementById("cat1").style.background = "red";
document.getElementById("cat2").style.background = "yellow";


document.getElementById("cat1").setAttribute("style", "background: red;");
document.getElementById("cat2").setAttribute("style", "background: yellow;");

Thus, the background aspect of your :hover pseudo-class selector is being overridden. Using background-color: pink !important increases its specificity and solves the problem.


Is there any way I can manipulate hover properties in javascript?Using mouse hover events, yes.

An example:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>CF 107305</title>

<!-- Notes
1. A display: inline-block declaration is used as a workaround to an Internet Explorer rendering issue.
2. The display: inline-block declaration is not supported by Firefox.
3. A JavaScript‐based hover effect is used instead of a CSS‐based hover effect due to a lack of Internet Explorer 6 :hover pseudo‐class support.
4. Separation of structure and script has been sacrificed for Internet Explorer compatibility.
-->

<style type="text/css">
* { margin: 0; }
html { padding: 1em; }
a.cat { display: inline-block; padding: 4px; background-color: yellow; color: blue; cursor: pointer; }
a.cat-selected { background-color: red; }
a.cat-hover { background-color: pink; text-decoration: underline; }
</style>

<script type="text/javascript">
function test(n) {
var cat1 = document.getElementsByTagName("a")[0];
var cat2 = document.getElementsByTagName("a")[1];
switch (n) {
case 1:
cat1.className += " cat-selected";
cat2.className = cat2.className.replace(/ cat-selected/, "");
break;
case 2:
cat1.className = cat1.className.replace(/ cat-selected/, "");
cat2.className += " cat-selected";
break;
}
}
</script>

</head>
<body>

<div>
<a class="cat" onclick="test(1);" onmouseover="this.className += ' cat-hover';" onmouseout="this.className = this.className.replace(/ cat-hover/, '');">Cat1</a>
<a class="cat" onclick="test(2);" onmouseover="this.className += ' cat-hover';" onmouseout="this.className = this.className.replace(/ cat-hover/, '');">Cat2</a>
</div>

</body>
</html>

Also make sure (http://www.validome.org/validate) that you use valid HTML. The HTML in your initial post is not correct.

diafygi
02-13-2007, 09:54 PM
Thanks guys, you have been infinitely helpful. The !important suggestion worked perfectly.

MikeFoster
02-13-2007, 10:14 PM
Great post, Arbitrator! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum