SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Manipulate child elements of a list on hover

    Hi All,

    I am trying to manipulate child elements in a list on hover, my list is as follows:

    <ul id="display">
    <li><a href="">Africa</a></li>
    <li><a href="">Austria</a></li>
    <li><a href="">Australia</a>
    <ul id="display_secondary">
    <li><a href="">South Australia</a>
    <ul id="display_secondary">
    <li><a href="">Adelaide</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="">Bolivia</a></li>
    </ul>

    What i am trying to achieve:
    When i rollover an <li> that has a nested <li> both it and its children should have the same hover effect. Ie if i was to hover on Australia, it's text and both South Australia and Adelaide would change to red. The same applies if i was to hover on South Australia, Adelaide would have the same hover effect.

    Has anybody seen or implemented anything like this, if so your help would be greatly appreciated.

    thanks
    doug

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    li:hover { color:red; }
    Above works in IE 7, Opera, Firefox, Safari etc. This will however fail in IE 5-6, you will need to attach events to all the children...

  3. #3
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It might be easier to use a class on the target elements and change the properties of the class on hover. I might suggest using Pepejeria's solution for newer browsers, with JavaScript code within IE conditional comments to account for older IEs.

    And why doesn't anyone ever test on Dillo? (heh, heh, heh)

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because nobody knows and cares about Dillo?

  5. #5
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pepejeria, how jaded! Dillo is useful to those with less robust hardware, is packaged with some resource-economical Linux distributions, like Puppy Linux, and is said to be the browser of choice for some hand held devices.

    Dillo is light (350K), fast and at only version 0.8.6 already has a much greater market share than Internet Explorer had in 1994. Obviously, Dillo would be poised to take over the world if it weren't for the power and popularity of Lynx.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •