...

View Full Version : setting background from js destroys background hover effect



BubikolRamios
02-10-2007, 06:34 PM
this works fine: background and color getts changed



.mi:hover
{
background:#FFFFD9;/*sort of yellow*/
color: #B90400;/*red*/
}

<a id = 'test' class = "mi" href="#n">aaaaaaaaaaa </a>


when



document.getElementById('test').style.background = 'blue'


effect from hover , on background, is gone !?
on color part still works.
it isn't browser thing, works the same on IE and FF


this, on the other hand, works as expected, does not corrupt anything



document.getElementById('test').style.color = 'blue'


test link:
http://86.61.66.17:8084/AgroZoo/testHTML/testHTML.jsp


thanks for replays

shyam
02-10-2007, 06:53 PM
Inline styles always override the stylesheet styles applied

add this to the css

.changed {
background-color: #0000ff;
}
and change the button code to something like this

<BUTTON class = "brb" ONCLICK="document.getElementById('test').className = document.getElementById('test').className + ' changed';"> destroy background hover 1</BUTTON>

should do the trick

BubikolRamios
02-10-2007, 08:14 PM
nice tip, didn't know that classes in css could be combined like that.

thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum