使CSS悬停元素永久onclick

时间:2013-11-28 19:55:57

标签: javascript css

所以我创建了一个带有一些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/

3 个答案:

答案 0 :(得分:0)

如果您对javascript没有太多经验,我建议您使用JQuery。使用它来在您的网站中包含JQuery库:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

这将允许您简单地(在您的html文件中):

<script> 
$(".boxtest").mouseenter(function() { $(".boxtest").addClass("boxtestHover"); });
</script>

也适用于上述更改.boxtest:悬停到boxtesthover(或任何你想要的)

答案 1 :(得分:0)

你走了!

基本上我使用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/

答案 2 :(得分:0)

jQuery对此有点过分。

不使用悬停,而是使用其他类名,然后将其添加到元素

onmouseover="this.className='newClassName'"