change bg of div1 when hovering div2

Discussion in 'Javascript' started by max, Nov 13, 2006.

  1. max

    max Guest

    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.
     
    max, Nov 13, 2006
    #1
    1. Advertising

  2. max

    ASM Guest

    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
     
    ASM, Nov 13, 2006
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. GD
    Replies:
    4
    Views:
    2,223
    =?Utf-8?B?Q3VydF9DIFtNVlBd?=
    Sep 13, 2005
  2. Wayfarer
    Replies:
    7
    Views:
    483
    picayunish
    Sep 23, 2003
  3. Cogito
    Replies:
    3
    Views:
    433
    Beauregard T. Shagnasty
    May 25, 2005
  4. jef
    Replies:
    1
    Views:
    125
    Eliyahu Goldin
    Apr 12, 2005
  5. Replies:
    3
    Views:
    208
    Rick Johnson
    Jan 11, 2013
Loading...

Share This Page