Ir para conteúdo

POWERED BY:

Arquivado

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

Bruno Ferreira da Silva

Como usar o atributo hover dessa forma?

Por , em Desenvolvimento frontend

Recommended Posts

Bruno Ferreira da Silva    6

Bruno Ferreira da Silva
Postado
<html>

<head>

<title> TESTE1 </title>

<style>

.img1 {width: 50px;}


.img2 {width: 50px; }


.img1:hover > .img2 {width: 150px; }

</style></head>


<body>


<div id="corpo">

<img src="img1.jpg" class="img1"/><br/><br/><br/>

<img src="img2.jpg" class="img2" />



</div>



</body>

</html>


Não estou conseguindo! gostaria que quando ao passar o mouse em cima da IMG1 a IMG2 aumentasse o tamanho, não estou conseguindo, sou inciante curioso, rs

Boa tardinha galera ^^

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

cara, vc só errou o seletor.

<style>
#a, #b {
	width: 100px;
	height: 100px;
	float: left;
	margin-right: 20px;
	-webkit-transition: 1s all;
	-moz-transition: 1s all;
	-ms-transition: 1s all;
	-o-transition: 1s all;
	transition: 1s all;
}
#a { background: #ff0; }
#b { background: #f0f; }
#a:hover ~ #b {
	width: 200px; height: 200px;
}
</style>

<div id="a"></div>
<div id="b"></div>
para chegar em irmãos, o seletor é o ~, o > é para filhos diretos.

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