How to manipulate div size without using hover

Question

How to manipulate div size without using hover

Navigation

#1 by (8 votes)
#2 by (3 votes)

5

Edited - Although I have requested exclusively in css, I have seen that in fact the final result in JS is much more professional and lean. Being so I confirmed @renan's response as the one that really helped. However I would stress here that @Fetz's response was really the best output to use CSS in this case. However the final effect is ugly, moving the entire page of place.

My question is simple. I have used :hover heavily in CSS and it has served me to some extent.

However, I have wanted something different. I wanted to be able to click on a div so that it would increase in size, and that I would have to click on it in a specific corner to decrease it.

The hover is part of the process, but when you hover the mouse from div it returns to the previous size.

What I want is for div to only change when I click on it. And if possible it will only return to its original form if I click on a X for example or outside the div in question.

I've tried a lot, I've found some things in JS, but I'm doing my best not to use JS in my project. So I started to imagine that with PHP this is possible. Or some CSS keyword to put in stylesheet instead of hover .

Do you have any words reserved for this like a possible onmouseclick of life?

Thank you in advance.

#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;

}

php css hover

asked by anonymous 06.05.2015 / 22:14

2 answers

3

With css you can only do this:

If you use the pseudo selector target instead of hover .

In order to use the target, you need to have an id (ex: <div id="show"> ) in the element that will grow and a link pointing to the id of the element you want to grow (ex: show ) with the prefix # (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;
}

Example to work: link

08.05.2015 / 04:08

Display date and time in PHP Difference between decimal and numeric

score 8 · Accepted Answer

You can enter a class responsible for increasing the div size when it is clicked, for example, a class that expands the div size to 'x' in> pixels .

The way you're going to do this depends on the support you want to give users (actually, the browser they use). There is the classList API but Internet Explorer still has partial implementation, such as can see this link . However I found this question in StackOverflow in where there are ways to get around this "problem" in IE.

An example using the classList API:

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>