Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript List styling

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #160760
    jaswinder
    Participant

    what i want to achieve is to have background on first-child of second ul .when i hover on it, it remain same, but if i hover on second li or any other li of second ul, the effect should be removed from first child

    here what i did

    ` .nav-menu li:hover ul li:first-child { background-color:#FFF; } .nav-menu li:hover ul li:first-child a { color: #474646; } ‘ what to do next now.. i tried :not(:first child) and :not(:hover) can’t get the result.. may be using wrongly. any help ?

    #160761
    Paulie_D
    Moderator

    Codepen example please?

    #160782
    jaswinder
    Participant

    http://cdpn.io/mjkal

    when i hover on 2nd ul 2nd li.. both displays highlited.. i want to remove effect from 1st li of second ul..

    apologies for such confusion .. thanks for reply

    #160783
    Paulie_D
    Moderator

    Just remove this:

    nav li:hover ul li:first-child
    {
        background-color:#555;
    }
    

    http://codepen.io/Paulie-D/pen/wHBiC

    #160796
    jaswinder
    Participant

    No. I need that.
    When i hover on options menu. Drop down will open with first child already highlited

    but when i hover on its next list-item (li) i.e two . the effect will get remove from one and apply on two

    i was trying
    :not(:first-child)
    but may be something wrong

    #160800
    Paulie_D
    Moderator

    Drop down will open with first child already highlighted

    Why would you do that…it’s not logical from a user’s point of view?

    Anyway, as as far as I know, the only way to affect an element higher up the DOM (such as a previous list item) is with Javascript/JQuery.

    Logically, you would give the first-child a class of say current and then remove it (and apply to to the hovered li) when the next li is hovered.

    You might ALSO need a second function to restore the ‘current` state when the parent li is not longer hovered.

    #160822
    jaswinder
    Participant

    ok… so not possible with css only.. i have to try for javascript/jquery then

    #160823
    Paulie_D
    Moderator

    Pretty sure it’s not possible with CSS.

    If you wish I can pass the thread to the JS section so we can help you further?

    #160829
    jaswinder
    Participant

    ya sure.. it helps me

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.