javascript - 使CSS悬停元素永久onclick

Question

所以我创建了一个带有一些 CSS 动画的小盒子:

.boxtest 
{
width: 50px;
height: 50px;
background-color: green;
opacity: .2;
transition: opacity .8s, width .8s ease-out;
-moz-transition: opacity .8s, width .8s ease-out;
-webkit-transition: opacity .8s, width .8s ease-out;
-o-transition: opacity .8s, width.8s ease-out;
}

.boxtest:hover {
opacity: 1;
width: 70%;
}

我希望 CSS 悬停类在用户将鼠标悬停在元素上后保持不变。

我想您需要使用 Javascript，但我不是专家，所以无法找到正确的命令。任何帮助都会很棒!

http://jsfiddle.net/r75gC/

Answer 1

给你!

基本上我使用 jQuery 将一个类添加到 div。您可以选择以下两者之一。

//onClick
$(".boxtest").on("click", function () {
  $(".boxtest").addClass('permahover');
});

//onHover
$(".boxtest").on("mouseenter", function () {
  $(".boxtest").addClass('permahover');
});

我将 CSS 更改为:

.boxtest:hover,
.permahover {
    opacity: 1;
    width: 70%;
}

http://jsfiddle.net/rFRc5/2/