Ir para conteúdo

Mensagem Recomendada

Olá, pessoal !!

Estudei toda uma apostila sobre CSS, porém não estou conseguindo realizar uma simples tarefa !!

Ao passar o mouse no 'button.botao', ativar o movimento do 'div.traco' ! Eis abaixo o 'Código Fonte' que estou tentando:


 

<!DOCTYPE html>
<html>
<head>
<style> 
button.botao {
	width: 150px;
	height: 50px;
	border: none;
	background-color: black;
	color: red;
	font-size: 23px;
}

div.traco {
    width: 20px;
    height: 10px;
    background: red;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

button.botao:hover div.traco {
    width: 150px;
}
</style>
</head>
<body>

<button class="botao">Botao</button>
<div class="traco"></div>

</body>
</html>

Me ajudem por favor !
Obrigado !!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bateu na trave!

Do jeito que você "traco" deveria ser descendente de "botao".

Como ele é um "irmão" você deve usar o sinal de mais (+) conforme abaixo:

button.botao:hover + div.traco {
    width: 150px;
}

Isso só funciona se o elemento combinado for imediatamente após o elemento do hover.

Se houver outros elementos antes você deve usar o sinal de til (~)

css

button.botao:hover ~ div.traco {
    width: 150px;
}
<button class="botao">Botao</button>
<div>uma div</div>
<div>outra dia</div>
<div>uma div com varias coisas dentro...</div>
<div class="traco"></div>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

×