HTML CSS examples for CSS Widget:Hover on list
Highlight whole row on hover
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #energyRowContainer .energyRow:hover {<!-- w ww . java 2 s . co m--> background:yellow; } </style> </head> <body> <div class="energyRowContainer" id="energyRowContainer"> <div id="energyRow0" class="energyRow"> <div class="energyTypeHead"> Lorem ipsu </div> <div class="energyUnitMWH"> Lore </div> <div class="energyUnitT"> Lorem </div> <div class="energyUnitM3_1"> Lorem </div> <div class="energyUnitM3_2"> Lorem </div> <div class="energyUnitM3_3"> Lorem i </div> <div class="energyUnitM3_4"> Lorem </div> <div class="energyUnitM3_5"> Lorem i </div> <div class="energyUnitM3_6"> Lore </div> </div> <div id="energyRow1" class="energyRow"> <div class="energyTypeHead"> Lorem ipsu </div> <div class="energyUnitMWH"> Lore </div> <div class="energyUnitT"> Lorem </div> <div class="energyUnitM3_1"> Lorem </div> <div class="energyUnitM3_2"> Lorem </div> <div class="energyUnitM3_3"> Lorem i </div> <div class="energyUnitM3_4"> Lorem </div> <div class="energyUnitM3_5"> Lorem i </div> <div class="energyUnitM3_6"> Lore </div> </div> <div> </div> </div> </body> </html>