- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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.
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…
Actually, that would be
div:hover li {
display:block;
}
You can’t hover something with display:none
.
I stand corrected (twice). :-)
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.
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.