После Css: Hover

Question

Из любопытства я хочу знать, если я навешиваю над div и изменяю его размер, есть ли способ сохранить его таким образом, чтобы его уже зависли? здесь является полезным 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

Answer 1

Там может быть несколько решений. Если вы хотите использовать только CSS (и без JavaScript), вы могли бы сделать что-то вроде

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

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

Это может быть дешевым решением, но это CSS-только, и это хорошо работает. Переход к установке ширины/высоты обратно к стартовым значениям устанавливается на большое количество времени. Таким образом, переход происходит, но это не видно глазу. Example via jsfiddle

С JavaScript Я бы предпочел присвоить класс элементу вместо того, чтобы устанавливать значения через JS. Я считаю, что такие вещи, как width/height, должны быть установлены в CSS-файлах не в 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"); 
}); 

Answer 2

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

Answer 3

Вы можете прочитать это использовать переменные в CSS3, я думаю, что это будет делать трюк!

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

После этого вы можете установить переменную --var = 100px; и использовать его, после того, как вы наведете его, установите его на -var = 300px; поэтому он сохранил бы это.

Answer 4

С JQuery:

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

ли легко сделано, мы можем усложнить его, если вы хотите! ;)

Здесь идет пример Fiddle: http://jsfiddle.net/UzM7U/24/

Answer 5

Я думаю, что вы не можете создавать переменные в CSS прямо сейчас.

Если вы хотите, чтобы это хранилище вашего значения, вам нужно использовать препроцессор CSS как SASS или LESS. которые являются динамическими языками CSS. В этих языках, написанные на вершине CSS, которые делают использование переменных, как вы просили

$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

или Менее

http://lesscss.org/

Примечание: у меня нет большого знания об этом языке. Но я думаю, что это полезно для достижения цели OP. Поэтому, если я ошибаюсь в некоторых местах, пожалуйста, исправьте меня.