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.
ol.motivationbox .motivationbars:hover ~ .motivationbars, ol.motivationbox .motivationbars:hover { background-color: #008cba; }
.. if wanted use jquery , select preceding sibling elements, use this:
$('.motivationbox .motivationbars').hover( function(){ $(this).prevall().andself().addclass('active'); }, function(){ $('.active').removeclass('active'); } );
Comments
Post a Comment