Forums

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

Home Forums CSS Making Li's Visible when Div is hovered over

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #194012
    ViaJCE
    Participant

    Greetings to all !
    I am currently having a issue in a project I’m working on.
    Essentially, Im trying to get my li’s to only be visible when a div that they are nested within is hovered over.

    However, I need the process of the li’s becoming visible to be a bit slowed down, because the border of the div that they are nested in is supposed to expand, then the li’s appear.

    Any thoughts on how I can accomplish this ?

    Thanks in advanced for any and all help/advice.

    #194013
    Shikkediel
    Participant

    Very generally speaking, I think it would look something like this :

    div li {
    display: none
    }
    
    div li:hover {
    display: block
    }
    

    But a bit more specitifity on the div (id or class) would be a good thing so not every div nested li on the page defaults to it…

    #194015
    Paulie_D
    Moderator

    Actually, that would be

    div:hover li {
    display:block;
    }

    You can’t hover something with display:none.

    #194017
    Shikkediel
    Participant

    I stand corrected (twice). :-)

    #194018
    ViaJCE
    Participant

    Thanks guys.
    The thing is, I can’t can’t slow down the display being changed from none to block with the transition-duration property.
    I’ll revise my original post to say state that.
    The reason I want to slow down the process is because the border of the div is supposed to expand to reveal the li’s. I don’t want it to happen immediately.

    #194058
    Paulie_D
    Moderator

    Thing is, you haven’t shown us any code to work with.

    Make a Reduced Case Demo of what you have so far and we can work with that.

    No, you cannot animate or transition the display property but there are other techniques that achieve the same end.

    Here’s one example. The classes are added by Js but the functionality is entirely CSS.

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

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