469,653 Members | 1,781 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,653 developers. It's quick & easy.

change bg of div1 when hovering div2

max
hello
(is this a css or a javascript question? or both?)
when hovering, I can change the background (bg) color of a field (div),
e.g.
http://www.bep-zuerich.ch/hover4.htm
with javascript I define, which div's of the navigation's secondary and
third level are visible or get hidden (not included in the example).
now I should be able to show the path gone through navigation levels:
when on field 'one', the bg changes to light grey.
when on field 'two', the bg of field 'one' should remain light grey,
that of 'two' become so.
when on field 'three', the bg of all three fields 'one', 'two' and
'three' should be light grey.
when unhovering, all bg should change back to dark grey.

how can I do this? thanks for any help. max.

Nov 13 '06 #1
1 1771
ASM
max a écrit :
hello
(is this a css or a javascript question? or both?)
It could be an interesting css question if IE is not used
except if as example given you use links in your divs.
when hovering, I can change the background (bg) color of a field (div),
e.g.
http://www.bep-zuerich.ch/hover4.htm
You only want this effect ?

CSS :
=====
#menu { list-style: none; display: inline; }
#menu li { margin: 0; padding: 0; width: 75px; }
#menu a { display: block; text-align: center;
text-decoration: none; color: white; background:#999;}
#menu a:hover { color: maroon; background: #ffc; }

HTML :
======
<ul id="menu">
<li><a href="page1.htm">menu 1</a></li>
<li><a href="page2.htm">menu 2</a></li>
<li><a href="page3.htm">menu 3</a></li>
</ul>
<hr style="clear:left;visibility:hidden" />
how can I do this? thanks for any help. max.
javascript:
===========
function roll(what) {
what.className = what.className=='grey'? 'light_grey' : 'grey';
}

CSS :
=====
..grey { background: #999; }
..light_grey { background: #ddd; }

html :
======
<input name="one" class="grey"
onmouseover="roll(this);" onmouseout="roll(this);" />
<input name="two" class="grey"
onmouseover="roll(this);" onmouseout="roll(this);"/>
<input name="three" class="grey"
onmouseover="roll(this);" onmouseout="roll(this);" />
See my contact form about focus, hover in inputs
(and help in JS for IE)

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Contact : http://stephane.moriaux.perso.wanadoo.fr/contact
Nov 13 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

11 posts views Thread by Yeah | last post: by
3 posts views Thread by Steve Long | last post: by
2 posts views Thread by chris_culley | last post: by
7 posts views Thread by Giacomo | last post: by
10 posts views Thread by The Bicycling Guitarist | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.