html - CSS - Keep hover state on "unhover"? -

i have row of 5 divs, , when hover on one, fills width of screen.

the blue div fills width of screen default; way screen full , can apply css shrink down when hover on other divs because declared last in html:

#green{     width:20px; } #blue{     width:100%; } #green:hover{     width:100% } #green:hover ~ #blue{     width:20px;    } 

is there way keep 1 div open after "unhovered"? example, if orange div had been open , mouse went off of not onto of colored divs, keep full width. currently, when mouse rolls off, divs slide blue.

also, can without script?

no, can't without javascript. here sample code can use:

<div id="green" onmouseover="green()">foo</div>  <div id="blue" onmouseover="blue()">more foo</div>  <div id="pink" onmouseover="pink()">even more foo</div> 

and script:

function green() {     $('div').css('width','20px');     $('#green').css('width','100%'); }  function blue() {     $('div').css('width','20px');     $('#blue').css('width','100%'); }  function pink() {     $('div').css('width','20px');     $('#pink').css('width','100%'); } 

hope helps!