使CSS悬停元素永久onclick

Question

So I have created a little box with some CSS animation:

.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%;
}

What I'd like is for the CSS hover class to remain permanent after the user has hovered their mouse over the element.

I guess you'd need to use Javascript, but I'm no expert so can't figure out the right command. Any help would be awesome!

http://jsfiddle.net/r75gC/

Answer 1

If you haven't a lot of experience with javascript I would recommend using JQuery. Use this to include the JQuery libraries in your website:

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

this will allow you to simply do (in your html file):

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

also for the above change .boxtest:hover to boxtesthover (or whatever you want)

Answer 2

Here you go!

Basically I used jQuery to add a class to the div . You can choose one of the two below.

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

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

I changed the CSS to:

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

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

Answer 3

jQuery is a bit overkill for this.

Instead of hover, use another class name, then just add this to the element

onmouseover="this.className='newClassName'"