Css之后：悬停[重复]答案

【问题标题】：After Css:Hover [duplicate]Css之后：悬停[重复]
【发布时间】：2014-07-08 22:02:59
【问题描述】：

出于好奇，我想知道，如果我将鼠标悬停在一个 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

【问题讨论】：

需要javascript！

标签： css

【解决方案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");
 });

【讨论】：

+1 到您的 CSS 答案，您可能想要添加小提琴。
你知道怎么做才能让盒子达到全尺寸然后上锁

【解决方案2】：

您可以阅读这篇文章以在 css3 中使用变量，我认为它可以解决问题！

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

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

【讨论】：

【解决方案3】：

使用 jQuery：

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

制作简单，如果您愿意，我们可以将其复杂化！ ;)

这是 Fiddle 中的示例：http://jsfiddle.net/UzM7U/24/

【讨论】：

没有jQuery标签..
@SidM 我只是给了他他想要的东西，用 jQuery 而不是 CSS。如果他需要快速解决方案。同时我正在研究 CSS 解决方案。
okies 很好，但是在 jQuery 中不需要任何关于答案的问题，如果是这样的话，OP 会提到它，rest 也会使用 jQuery 发布答案

【解决方案4】：

我认为你现在不能在 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 的目标。所以如果我在某些地方错了，请纠正我。

【讨论】：

【解决方案5】：

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

【讨论】：

OP 表示在时间之后，而不是元素。