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

Popular posts from this blog

php - render data via PDO::FETCH_FUNC vs loop -

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

The canvas has been tainted by cross-origin data in chrome only -