Edited -- Apesar de ter pedido exclusivamente em css, vi que de fato o resultado final em JS é muito mais profissional e enxuto. Sendo assim confirmei a resposta de @renan como a que auxiliou de fato. Contudo ressalto aqui que a resposta de @Fetz foi realmente a melhor saída para a utilização de CSS nesse caso. Entretanto o efeito final é feio, movendo a página inteira de lugar.
Minha dúvida é simples. Tenho usado muito o :hover
no CSS e tem me servido até certo ponto.
Contudo tenho desejado uma coisa diferente. Queria poder clicar numa div
para que ela aumentasse de tamanho, e que eu tivesse que clicar nela num canto específico para ela diminuir.
O hover
faz parte do processo, mas quando tiro o mouse de cima da div
ele volta ao tamanho anterior.
O que quero é que a div
só mude quando eu clicar nela. E se possível ela só volte à forma original se eu clicar num X
por exemplo ou fora da div
em questão.
Já procurei muito, encontrei algumas coisas em JS, mas estou fazendo o possível para não utilizar JS nesse meu projeto. Então comecei a imaginar que com PHP isso seja possível. Ou alguma palavra chave de CSS pra colocar no stylesheet
no lugar do hover
.
Tem alguma palavra reservada para isso como por exemplo um possível onmouseclick
da vida???
Grato antecipadamente.
#atredit{
position:absolute;
width: 150px;
height: 75px;
background-color: #F5F5F5;
border: 1px solid #111111;
border-radius: 5px;
margin-top: 150px;
margin-left: 200px;
overflow: hidden;
cursor:pointer;
}
#atredit:hover{
width: 150px;
height: 300px;
transition: 0.5s ease-in-out;
}