Why doesn’t Transition work?

Asked

Viewed 1,300 times

0

The div #sub should make a transition of opacity when passing the mouse over #item, but it doesn’t work. It only works when I take the display: none How do you fix it ?

		#item,#sub{
			height: 40px;
			width: 300px;
			padding: 0px;
		}
		#item{
			background-color: red;
			position: absolute;
		}
		#sub{
			display: none;
			opacity: 0;
			background-color: yellow;
			margin-top: 40px;
			position: relative;
			transition: opacity 1s linear 0s;
		}
		#item:hover #sub, #item #sub:hover{
			display: block;
			opacity: 1;
			transition: opacity 1s linear 0s;
		}
		<div id="item">
			<div id="sub">
			</div>
		</div>

css3
  • 1

    transition does not work with the display, which is really your problem since it gets hidden with the opacity: 0?

  • I will use this in a menu. The problem is that the opacity: 0 does not hide right. If you hover over the menu is still there and still covers other parts of the page. I need that when passing the mouse through the item open a submenu with transition and when taking the mouse it totally disappears.

  • 1

    Carlos combines the opacity with visibility and then it will no longer overlap. You can complete this jsFiddle to reproduce the problem you describe when using opacity? http://jsfiddle.net/wunafgug/

1 answer

2


You can remove the display, and use visibility, so the element will not continue on the screen and the transition will work, as I have already mentioned here in another answer.

Follow the example:

#item,
#sub {
  height: 40px;
  width: 300px;
  padding: 0px;
}
#item {
  background-color: red;
  position: absolute;
}
#sub {
  /*display: none;*/
  visibility: hidden;
  opacity: 0;
  background-color: yellow;
  margin-top: 40px;
  position: relative;
  transition: opacity 1s linear 0s;
}
#item:hover #sub,
#item #sub:hover {
  /*display: block;*/
  visibility: visible;
  opacity: 1;
  transition: opacity 1s linear 0s;
}
<div id="item">
  <div id="sub">
  </div>
</div>

  • Thank you ! It works perfectly.

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.