Why does not the transition work?

Question

Why does not the transition work?

Navigation

#1 by (2 votes)

0

The #sub div should make an opacity transition by hovering over #item , but it does not work. It only works when I display: none How do I resolve this?

		#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

asked by anonymous 07.06.2015 / 22:55

1 answer

Links does not work in menu Object Orientation in Java [closed]

score 2 · Accepted Answer

You can remove display , and use visibility , so the element will not continue on screen and transition will work, as I 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>