As I understood your question, You can have two classes one for hidden (display :none) and another for visuallyHidden (may be visibility : hidden). On hover use visualy hidden class to get the css transition in effect(take help of JavaScript to add this class). You must take a help of setTimeout here (10 Ms ) should be fine to add another class which actually implements css transition. when it is un hovered you need to recycle logic again. hope it helps
Solution 1 :
Problem :
I have an element whose width increases when another element beside it is hovered over, i.e.
.div2 {
width: 0px;
display: none;
transition: width 2s;
}
.div1:hover ~ .div2 {
width: 100px;
}
I want to change the display to block on mouseover, but before the CSS transition. Then, similarly, I want to change the display back to none after the CSS transition finishes. I tried using .onmouseover to set the display to block, but it set it after the CSS transition.
Is there any way to set the display to block before the CSS transition?
Comments
Comment posted by mwilson
css and javascript don’t communicate with each other. You can however, add you css classes to your html via javascript so that things happen in the order you want.
Comment posted by Maniraj Murugan
Can you post the whole code of what you have tried which you mention in question as …. “I tried using .onmouseover to set the display to block, but it set it after the CSS transition.”
Comment posted by Benjamin James Kippax
Surely you’re looking for :hover {display:block;}?
Comment posted by Cosmos
@mwilson How would you add the classes in order? I tried doing (I’m using jQuery here because it’s easier)
Comment posted by Cosmos
@BenjaminJamesKippax No, because if I use