Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > change bg of div1 when hovering div2

Reply
Thread Tools

change bg of div1 when hovering div2

 
 
max
Guest
Posts: n/a
 
      11-13-2006
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.

 
Reply With Quote
 
 
 
 
ASM
Guest
Posts: n/a
 
      11-13-2006
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to change colors of multiple widgets after hovering in Tkinter mountdoom12@gmail.com Python 3 01-11-2013 05:43 AM
"Floating Layer" when hovering over a LinkButton GD ASP .Net 4 09-13-2005 09:42 PM
Help text window when hovering Cogito HTML 3 05-25-2005 01:13 PM
Can I change the mousepointer while hovering over datagrid? jef ASP .Net Datagrid Control 1 04-12-2005 10:57 AM
Happy Medium for Hovering Navigation "Buttons" Wayfarer HTML 7 09-23-2003 09:29 PM



Advertisments