CSS and JavaScript
- Started
- Last post
- 11 Responses
- seed
I am using JS and CSS to show and hide various sub navigations. The JS also changes the bg color of the selected main nav item. Anyone know why once I use JS to set a bg color on a nav item the normal CSS hover states will no longer work for it?
- heavyt0
without seeing your code, JS, will supercede rules for the same element that are defined in a stylesheet.
do you mean, that once you have selected an option, then go to somethign else, then hover back over the original, that original no longer does reflects teh :hover rules???TR1
- seed0
yes, exactly.
- heavyt0
i recommend that you use JS to change the class name, rather than dealign with defining the properties themselves.
onmouseover{this.className += ' active';}or somethign similar to that. Then on mouseout, remove that class name.
TR1
- seed0
"Then on mouseout, remove that class name."
Thanks, I'll have to look into that. JS is not one of my stronger points.
- ********0
use Fireworks and Dreamweaver , fireworks 8 does it all in css and javascript
- ********0
- seed0
I am doing something slightly different. I have used those in the past. I would much rather do those in CSS. The amount of code used in the FW generated menus is ridiculous. Especially compared to a simple HTML list.
- spiralstarez0
it shouldn't be too hard in js:
something like:
function roll {
this.className = 'newClass';
}function rollOut {
this.className = 'originalClass'
}that's in its simplest. Then you can just put onMouseOver and onMouseOut as attributes to those functions in your markup
- spiralstarez0
but wait a second, how well do you know css?
Everything that you've mentioned you are doing there sounds like it can be done with pure css.
- seed0
I have a main nav and a sub nav below, both horizontal. I used javascript so that when you click the main nav it changes to a 'currently on' state and shows one of the 5 subnavs that are hidden. So it looks like tabs with the main nav button that was selected shown as the same color as the subnav. All without refreshing the page. The main nav tab stays in its 'on' state until another is selected. I will post a screen or some code tomorrow if I get a chance.
I am really just curious why a hover state won't work once you alter the bg color with JS.