How attribute lost when changing bk color of an element


J

joe

Here is simple code to illustrate a problem I am having.
The html creates a simple one-cell table. The text has yellow bk and when mouse
is over it (hovering) bk turns gray.

Then I click "Change" which runs changetext() function. Text changes but the
hovering bk change feature is no longer there.

If I remove the line labeled as "the problem line" it works as expected.

What gives?


<html><head>
<style type="text/css">
td.muu { background: #F1F10D; }
td.muu a {background: ##80FF80;}
td.muu a:hover {background: #C0C0C0; }
</style>

<script type="text/javascript">
function changetext()
{
document.getElementById("test1").style.backgroundColor="#40FF40"; //the problem
line
document.getElementById("test1").innerHTML="Bk should be green, when hover is
should be gray as before";
}

function crtable()
{
document.write('<table><tr>');
document.write('<td class="muu"><a id="test1" href="#"
onclick="javascript:changetxt()">Bk is yellow, hover its gray</a></td>');
document.write('</tr></table>');
}

</script>
</head><body>

<script type="text/javascript">
crtable();
</script>

<br>
<button onclick="changetext();">Change</button>
</body></html>
 
Ad

Advertisements

P

pr

joe said:
Here is simple code to illustrate a problem I am having.
The html creates a simple one-cell table. The text has yellow bk and when mouse
is over it (hovering) bk turns gray.

Then I click "Change" which runs changetext() function. Text changes but the
hovering bk change feature is no longer there.

If I remove the line labeled as "the problem line" it works as expected.

What gives?


<html><head>
<style type="text/css">
td.muu { background: #F1F10D; }
td.muu a {background: ##80FF80;}

typo: '##'
td.muu a:hover {background: #C0C0C0; }
</style>

<script type="text/javascript">
function changetext()
{
document.getElementById("test1").style.backgroundColor="#40FF40"; //the problem
line

Indeed it is. You are overriding CSS applied to the parent's class by
setting an explicit style on the element; see <URL:
http://www.w3.org/TR/CSS21/cascade.html#specificity>.

Instead of setting the style, set the className:

td.muuGreen a { background-color: #40FF40; }
td.muuGreen a:hover { background-color: #C0C0C0; }

and

document.getElementById("test1").parentNode.className = "muuGreen";

Alternatively, just use style attributes and forget about classes. It
can get a bit confusing if you mix the two.
document.getElementById("test1").innerHTML="Bk should be green, when hover is
should be gray as before";
}

function crtable()
{
document.write('<table><tr>');
document.write('<td class="muu"><a id="test1" href="#"
onclick="javascript:changetxt()">Bk is yellow, hover its gray</a></td>');

onclick="changetxt()"

[...]

Hope that helps.
 
Ad

Advertisements

J

joe

Thanks!
It works now.

[snip]
Indeed it is. You are overriding CSS applied to the parent's class by
setting an explicit style on the element; see <URL:
http://www.w3.org/TR/CSS21/cascade.html#specificity>.

Instead of setting the style, set the className:

td.muuGreen a { background-color: #40FF40; }
td.muuGreen a:hover { background-color: #C0C0C0; }

and

document.getElementById("test1").parentNode.className = "muuGreen";

Alternatively, just use style attributes and forget about classes. It
can get a bit confusing if you mix the two.
document.getElementById("test1").innerHTML="Bk should be green, when hover is
should be gray as before";
}

function crtable()
{
document.write('<table><tr>');
document.write('<td class="muu"><a id="test1" href="#"
onclick="javascript:changetxt()">Bk is yellow, hover its gray</a></td>');

onclick="changetxt()"

[...]

Hope that helps.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top