5

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;

}
7
  • Hanzer, mesmo parecendo irrelevante neste caso, considere que incluir um trecho de código (apenas o trecho que quando vc tira o mouse de cima da div ele volta à forma original) vai aumentar muito uas chances de receber respostas.
    – gustavox
    Commented 6/05/2015 às 20:27
  • 1
    obrigado @gustavox
    – Djpessoa
    Commented 6/05/2015 às 20:29
  • Editei meu comentário anterior pra constar o trecho que acho importante vc incluir.
    – gustavox
    Commented 6/05/2015 às 20:30
  • 2
    O PHP não consegue mudar tamanhos de div pois ele não tem como modificar as configurações dela. Mas Jquery consegue perfeitamente solucionar o seu problema. Commented 6/05/2015 às 21:07
  • 1
    O Jquery é feito em javascript, só que mais polido. Melhor usar o jquery pois ele possui classes prontas para fazer o que você quer. Commented 7/05/2015 às 16:30

2 Respostas 2

8

Você pode inserir uma classe responsável por aumentar o tamanho do div quando este for clicado, por exemplo, uma classe que expande o tamanho do div em 'x' pixels.

A forma como você vai fazer isso depende do suporte que você quer dar aos usuários (na verdade, ao navegador que eles utilizam). Existe a API classList mas o Internet Explorer ainda possui implementação parcial, como pode ver neste link. No entanto encontrei essa pergunta no StackOverflowen na qual existem formas de contornar esse "problema" no IE.

Um exemplo utilizando a API classList:

document.querySelector('div').addEventListener('click', function() {
  this.classList.toggle('ativa');
});
div {
  width: 200px;
  height: 100px;
  background: red
}
div.ativa {
  width: 400px
}
<div></div>

document.getElementById('foo').addEventListener('click', function() {
  this.classList.toggle('ativa');
});
#foo {
  width: 200px;
  height: 100px;
  background: red
}
#foo.ativa {
  width: 400px
}
<div id='foo'></div>

7
  • vlw @renan! no caso isso é JS? De todo modo agradecido!
    – Djpessoa
    Commented 6/05/2015 às 23:04
  • olá novamente @renan! Sendo JS como procedo para ao invés de usar div como no exemplo seu eu usar a id da div?
    – Djpessoa
    Commented 6/05/2015 às 23:17
  • compreendo que provavelmente seja '#varid
    – Djpessoa
    Commented 6/05/2015 às 23:26
  • 1
    @HanzerDjAlgonn colocou onde? No caso, o código teria que ser inserido depois do elemento HTML. Se você tentar chamar essa função antes (no head, por exemplo) não irá funcionar. Vale lembrar que não entra só a questão do Javascript mas do CSS também, editei minha resposta e criei um novo snippet pegando o div pelo id. Commented 7/05/2015 às 20:47
  • 1
    testei de várias formas. Funcionou agora. Eu salvei o código numa página fora do html .js. Coloquei a chamada do código acima da tag </body>. Funcionou lindamente! Grato profundamente. Apesar de não ser somente css agradeço deveras o esforço! vlw
    – Djpessoa
    Commented 9/05/2015 às 1:52
3

Com css apenas podes fazer assim:

Se usares o pseudo selector target em vez do hover.

Para usares o target, precisas de ter um id (ex:<div id="show">) no elemento que vai crescer e um link a apontar para o id do elemento que queres que cresca (ex: show) com o prefixo # (ex:<a href="#show">)

html:

<a href="#">x</a>
<div id="show">
    <a href="#show">
      <img src="http://placekitten.com/g/300/201" alt="Kitten 2"/>
    </a>
</div>

css:

#show img {
    height: 150px;
}

#show:target img {
    height: 300px;
}

exemplo a funcionar: http://jsfiddle.net/zzsLb6g9/

3
  • Concordo.
    – bfavaretto
    Commented 8/05/2015 às 2:15
  • uou!! Isso chegou muito perto! Realmente aumentou e agradeço deveras! Contudo a página se moveu pra cima. Tem alguma âncora que eu possa colocar para resolver isso? Toda vez que a página for chamada essa âncora segurar em determinado ponto?
    – Djpessoa
    Commented 9/05/2015 às 0:34
  • Essa reação de movimentar a página me desagrada deveras. por isso, apesar de sua resposta ser a que mais se aproximou do que pedi aceitei a do brother acima por que o efeito final foi realmente melhor em JS. Contudo muito grato por me mostrar essa possibilidade.
    – Djpessoa
    Commented 9/05/2015 às 1:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .