Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   Javascript (http://www.velocityreviews.com/forums/f68-javascript.html)
-   -   change bg of div1 when hovering div2 (http://www.velocityreviews.com/forums/t928142-change-bg-of-div1-when-hovering-div2.html)

max 11-13-2006 03:24 PM

change bg of div1 when hovering div2
 
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.


ASM 11-13-2006 07:08 PM

Re: change bg of div1 when hovering div2
 
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


All times are GMT. The time now is 10:07 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.