html - How to use nth-child with :hover to style multiple children? -


js fiddle easier debugging: http://jsfiddle.net/gregsfiddle/wyc7y/1/

i trying setup css when mouseover nine, 9 , below bg color changed.

mouseover 5, , 5 , below have color changed. idea. not sure how use nth-child(-n+#) selector :hover.

ol.motivationbox .motivationbars li:nth-child(10):hover:nth-child(-n+9) { background-color: #008cba; } 

that bit of code not functioning. did format incorrectly?

since currently can't transverse dom tree, seems thing possible in pure css.

basically, general sibling combinator, ~, allows access succeeding sibling elements.

updated example here

ol.motivationbox .motivationbars:hover ~ .motivationbars, ol.motivationbox .motivationbars:hover {     background-color: #008cba; } 

.. if wanted use jquery , select preceding sibling elements, use this:

alternative example here

$('.motivationbox .motivationbars').hover(     function(){         $(this).prevall().andself().addclass('active');     },     function(){         $('.active').removeclass('active');     } ); 

Comments

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -