css - What am I missing to make the <li> stay clicked? -
html:
<ul> <li data-target="#front-info" data-slide-to="0" class="col-md-4 col-width-fix front-info-button"> <h1>heading one</h1> </li> <li data-target="#front-info" data-slide-to="1" class="col-md-4 col-width-fix front-info-button"> <h1>heading two</h1> </li> <li data-target="#front-info" data-slide-to="2" class="col-md-4 col-width-fix front-info-button"> <h1>heading three</h1> </li> </ul>
css:
.front-info-button:hover, .front-info-button:active { background-color:#666; }
it reacts hover won't maintain color after i've clicked , moved mouse away. missing?
you add behaviour inside javascript. example below uses jquery accomplish this:
css
.selected { background-color:#666; }
js
$('ul li').click(function() { $('ul li').removeclass('selected'); $(this).addclass('selected'); });
jsfiddle demo - http://jsfiddle.net/8zvsf/
Comments
Post a Comment