Question

Доброе утро.Подскажите пожалуйста,как сделать чтобы при наведение курсора на катигорию,кружки заполнялись цветом,как в вертикальном меню.

  * Module cats Menu */  .catsTd {  height:39px;  line-height:39px;  padding-left:10px;  border-bottom:1px dotted #e5e5e5; }  .catsTable tr:nth-child(1):before {content:"";border:2px solid #f9b744;display:inline-block;width:8px;height:8px;margin-bottom:0px;margin-right:11px;background:none;-webkit-border-radius: 25px;-moz-border-radius: 25px;border-radius: 25px;float:left;position: relative;top: 13px;} .catsTable tr:nth-child(2):before {content:"";border:2px solid #f25246;display:inline-block;width:8px;height:8px;margin-bottom:0px;margin-right:11px;background:none;-webkit-border-radius: 25px;-moz-border-radius: 25px;border-radius: 25px;float:left;position: relative;top: 13px;} .catsTable tr:nth-child(3):before {content:"";border:2px solid #f246a7;display:inline-block;width:8px;height:8px;margin-bottom:0px;margin-right:11px;background:none;-webkit-border-radius: 25px;-moz-border-radius: 25px;border-radius: 25px;float:left;position: relative;top: 13px;} .catsTable tr:nth-child(4):before {content:"";border:2px solid #a853d4;display:inline-block;width:8px;height:8px;margin-bottom:0px;margin-right:11px;background:none;-webkit-border-radius: 25px;-moz-border-radius: 25px;border-radius: 25px;float:left;position: relative;top: 13px;} .catsTable tr:nth-child(5):before {content:"";border:2px solid #65c0ac;display:inline-block;width:8px;height:8px;margin-bottom:0px;margin-right:11px;background:none;-webkit-border-radius: 25px;-moz-border-radius: 25px;border-radius: 25px;float:left;position: relative;top: 13px;} .catsTable tr:nth-child(6):before {content:"";border:2px solid #4859f8;display:inline-block;width:8px;height:8px;margin-bottom:0px;margin-right:11px;background:none;-webkit-border-radius: 25px;-moz-border-radius: 25px;border-radius: 25px;float:left;position: relative;top: 13px;} .catsTable tr:nth-child(7):before {content:"";border:2px solid #97ce6f;display:inline-block;width:8px;height:8px;margin-bottom:0px;margin-right:11px;background:none;-webkit-border-radius: 25px;-moz-border-radius: 25px;border-radius: 25px;float:left;position: relative;top: 13px;} .catsTable tr:nth-child(8):before {content:"";border:2px solid #3297db;display:inline-block;width:8px;height:8px;margin-bottom:0px;margin-right:11px;background:none;-webkit-border-radius: 25px;-moz-border-radius: 25px;border-radius: 25px;float:left;position: relative;top: 13px;}  /* ----------------- */

 

Answer 1

Наведу лишь пример как для первой сделать, а вы далее по этому же примеру сделаете для других, в стили пропишите:

.catsTable tr:hover:nth-child(1):before {border: 2px solid #f9b744; background: #f9b744;}

Comments

Спасибо огромное!