Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

FaahWl

Não acontece o 'Transition'

Por , em Desenvolvimento frontend

Recommended Posts

FaahWl    4

FaahWl
Postado

Bom galera, primeiramente boa noite!

 

To com um probleminha que não consigo resolver... quando passo o mouse sobre a Opção 1 aparece o submenu.. o problema é que ele aparece de uma forma brusca.. ai pensei, vou usar transition para alterar a opacidade dele... só que não sei o que acontece que não dá certo...

 

Alguém saberia me dizer o por quê?

 

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Dropdown</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
}
#gridAll {
	width:1000px;
	height:auto;
	margin:auto;
}
#gridMenu { }
#gridList{ width:800px; height:auto; margin:auto; }
.gridCell {
	display:block;
	float:left;
	width:150px;
	position:relative;
	display:inline;
	margin:2px;
	padding:20px;
	color:white;
	font-family:Arial;
	font-size:22px;
	background-color:#000;
	text-shadow:1px 1px 10px #333;
	text-align:center;

	cursor:pointer;
	-webkit-transition:all 400ms linear;
}
.gridCell:hover {
	background-color:#f00;
	padding-bottom:138px; 
	
	-webkit-transition:background-color 400ms linear; 
	-webkit-transition:padding-bottom 400ms linear; 
}
.gridList2 {
	position:absolute;
	left:0;
	display:none;
	opacity:0.2;
	
}
.gridCell:hover .gridList2 {
	float:left;
	width:190px;
	display:block;
	margin-top:15px;
	opacity:1;
	
	-webkit-transition:opacity 1s linear 2s;
}
.gridCell2 {
	padding:10px;
	list-style:none;
	color:#fff;
        background-color:#FFE7BA;
	font-size:16px;
	text-shadow:none;
}
.gridCell2:hover {background-color:#000;}
.gridCell2 a {
    color:#fff;
    text-decoration:none;
}
</style>

</head>
<body>
	<div id="gridAll">
			<div id="gridMenu">
				<ul id="gridList">
					<li class="gridCell">
						<a>Opção 1</a>
						<ul class="gridList2">
							<hr>
							<li class="gridCell2"><a>Opção 1.1</a></li>
							<hr>
							<li class="gridCell2"><a>Opção 1.2</a></li>
							<hr>
							<li class="gridCell2"><a>Opção 1.3</a></li>
						</ul>
					</li>
				</ul>
			</div>
	</div>
</body>
</html>

Agradeço desde já!

Compartilhar este post

Link para o post
Compartilhar em outros sites

reebr    94

reebr
Postado

Não é no 'hover' que você coloca a regra e sim no elemento. No 'hover' você coloca a regra de como ele deve ficar.

.minha-div {
   width: 100px;
   height: 40px;
   /* transition */
}


.minha-div:hover {
  width: 200px;
}

E esse que você fez só vai funcionar em navegadores webkit. Para que nos outros tenha o mesmo efeito:

.minha-div {
   -webkit-transition: all 200ms ease-in;
      -moz-transition: all 200ms ease-in;
        -o-transition: all 200ms ease-in;   
           transition: all 200ms ease-in;
}

Exemplo: http://jsfiddle.net/rnxn/up6TG/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito