After Css:Hover

Question

Out of curiosity I want to know, If I hover over a div and change its size is there a way to keep it like that after its already been hovered? here is a useful jsfiddle

#div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 1s, height 1s;
}

#div:hover {
width: 300px;
height: 300px;
enter code here

Fiddle

Gonna need javascript for that! – Luke Jul 08 '14 at 11:27 — Luke, Jul 08 '14 at 11:27

score 2 · Accepted Answer · edited Jul 08 '14 at 14:02

There may be several solutions. If you wish to use only CSS (and no JavaScript), you could do something like

#div {
    ...
    transition:width 3600s,height 3600s;
}  

#div:hover {
    ...
    transition:width 1s,height 1s;
}

It may be a cheap solution, but it's CSS-only and it works well. The transition to set width/height back to the starting values is set to a high amount of time. So the transition happens, but it's not visible to the eye. Example via jsfiddle

With JavaScript I'd prefer giving a class to the element instead of setting the values via JS. I believe things like width/height should be set in CSS-files not in JS.

CSS:
.hovered {
    width:300px;
    height:300px;
 }

 JS:
 document.querySelector("#div").addEventListener("hover",function() {
     this.classList.add("hovered");
 });

 JS/jQuery:

 $("#div").hover(function() {
     $(this).addClass("hovered");
 });

Do you know how to make it so that the box can reach full size and then be locked — ByronMcGrath, Jul 08 '14 at 12:15

score 0 · Answer 2 · answered Jul 08 '14 at 11:30

You could read this to use variables in css3, i think it would do the trick!

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

After that you could set a variable --var = 100px; and use it, after hover you reset it to --var = 300px; so it would keep it.

SrAxi · Answer 3 · 2014-07-08T11:42:34.770

0

With jQuery:

$("#div").hover(function() {
    $( this ).width("300px");
    $( this ).height("300px");
});

Is easy made, we can complicate it if you want! ;)

Here goes the example in Fiddle: http://jsfiddle.net/UzM7U/24/

edited Jul 08 '14 at 11:42

answered Jul 08 '14 at 11:37

SrAxi

19,787
11
46
65

There is no jQuery tag.. – Sid M Jul 08 '14 at 11:39
@SidM I just was giving him what he wanted, with jQuery instead of CSS. If he needed quick solution. Meanwhile I am researching CSS solution. – SrAxi Jul 08 '14 at 11:43
okies that's fine but there nothing mentioned in question about answer is needed in jQuery, if that would have been the caseOP would have mentioned it and rest would have also posted answers using jQuery – Sid M Jul 08 '14 at 11:46

Ishan Jain · Answer 4 · 2014-07-08T11:51:33.310

I think you can't create variables in CSS right now.

If you want this store your value onhover, you will need to use a CSS preprocessor like SASS or LESS. which are CSS Dynamic languages. In these language written on top of CSS which make use of variables like you asked

$var_width:100px;
$var_height:100px;

#div {
  width: $var_width;
  height: $var_height;
  background: red;
  -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
  transition: width 1s, height 1s;
}

#div:hover {
  width: 300px;
  height: 300px;
  $var_width:300px;
  $var_height:300px;
}

SASS

http://sass-lang.com/#variables

or Less

http://lesscss.org/

Note: I don't have a great knowledge about these language. But i think it's helpful to achieve the aim of OP. So if i am wrong at some where please correct me.

score -1 · Answer 5 · answered Jul 08 '14 at 11:29

-1

#div:hover:after {
  width: 300px;
  height: 300px;
  content:"";
  position:absolute;
  border:1px solid red;
}

answered Jul 08 '14 at 11:29

Kisspa

584
4
11

2

OP means after as in time, not element. – Curtis Jul 08 '14 at 11:31

After Css:Hover

5 Answers5