How can i remove from element the hover effect when clicked? - css

Question

I have this code
http://jsfiddle.net/F6Jqm/1/
I want when user clicks the png the hover <span> to stay. And when he clicks it again to return to the original form.

Answer 1

You could do this by adding a "stay" class on click
like in this fiddle: http://jsfiddle.net/F6Jqm/3/
The difference is in css:
#navigationMenu a:hover span, #navigationMenu a.stay span{
width:auto; padding:0 20px;overflow:visible;
}
And Added some jquery:
$(document).ready(function(){
$("a").click(function(){
$(this).toggleClass("stay");
});
});

Answer 2

I've update the fiddle
Try this:
var count = 0;
document.getElementsByClassName('home')[0].onclick = function() {
count = 1 - count;
if (count) {
document.getElementById('navigationMenu').className = 'stayHover';
}
else {
document.getElementById('navigationMenu').className = 'menuHover';
}
}
You could use toggleClass instead if you don't mind importing jQuery for this.

Answer 3

Here's a solution with only CSS (no Javascript). I only tested on firefox and chrome, but it should go on all recent browsers.
http://jsfiddle.net/F6Jqm/6/
The idea is to use the pseudoselector :checked of an input type checked and the relative label and setting it on the icon with opacity: 0.
CSS:
#navigationMenu li{
list-style:none;
height:20px;
width:20px;
}
#navigationMenu input[type=checkbox] {
position:absolute;
z-index: 1;
opacity:0;
}
#navigationMenu span{
width:0;
left:22px;
padding:0;
position:absolute;
overflow:hidden;
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:20px;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu label {
background:url('http://www.tigercamera.com/front/img/home.png') transparent no-repeat;
padding:0px;
height:20px;
width:20px;
display:block;
position:relative;
border: 0px;
}
/* General hover styles */
#navigationMenu input:hover + label span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu input:checked + label span{ width:auto; padding:0 20px;overflow:visible; }
/* Green Button */
#navigationMenu .home { background-position:0 0;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}
HTML:
<div id="main">
<ol id="navigationMenu">
<li>
<input name="check" type="checkbox"/>
<label for="check" class="home">
<span>Home</span>
</label>
</li>
</ol>
</div>

Answer 4

There you go(with pure js): http://jsfiddle.net/F6Jqm/7/
var nav = document.getElementById('navigationMenu'),
items = nav.getElementsByTagName('a'),
i;
for( i=0; i<items.length; i++){
items[i].onclick = function(){
if( this.classList.contains('active') ){ this.classList.remove('active') }else{
this.className = this.className + ' active';
}
};
}