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设置值。我相信宽度/高度之类的东西应该在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

您可以阅读此内容以在css3中使用变量，我认为它会起作用！

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

之后你可以设置一个变量--var = 100px;并使用它，悬停后将其重置为--var = 300px;所以它会保留它。

Answer 3

使用jQuery：

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

很容易制作，如果你愿意，我们可以复杂化！ ;）

以下是小提琴中的例子：http://jsfiddle.net/UzM7U/24/

Answer 4

我认为你现在无法在CSS中创建变量。

如果你希望这个商店你的价值转移，你需要使用像SASS或LESS这样的CSS预处理器。这是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的目标是有帮助的。所以，如果我在某些地方错了，请纠正我。

Answer 5

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

在Css之后：哈弗

5 个答案: