Faced a problem: Hover is assigned to each element in the table, and according to the initial data it should work on each cell when you hover the mouse. I have tried many ways of arranging li, ul and class elements. Nothing helps. What am I wrong?

enter image description here enter image description here

#teamgrouplist li:hover .selizionaton_in_table, #teamlist li:hover .selizionaton_in_table { display: block; } #teamgrouplist li:hover a, #teamlist li:hover a { background-color: #00244D !important; } 
 <div class="box_content"> <ul class="sidebar__menu sidebar__menu--left "> <li class="menu-item open scroll" style="max-height: calc(100% - 45px);"> <ul id="teamgrouplist" class="submenu"> <li v-for="(t, index) in teams" style="border-radius: 0 0 10px 10px;"> <div style="width: 100%; position: relative"> <a :id="[['team_'+t.tid]]" @click="getGroups(t)" :class="{pointer: true, groupExpanded: t.showGroups}" class="linknameteam" style="-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;padding-left: 10px;margin-right: 0px; font-size: 9pt;" :title="[[t.team_name]]">[[t.team_name | truncate(20,'...')]] </a> </div> <div v-if="t.team_name == selectedTeam" v-for="(g, index2) in t.groups" style="width: 100%; position: relative;"> <a :id="[['team_group_'+g.gid]]" class="pointer tgitem" @click="getContacts_for_Groups(g)" style="x-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; margin-right: 0px;font-size: 9pt;background: #00254c;" :title="[[g.group_name]]"> [[g.list_name | truncate(20,'...')]] </a> <div style="position: absolute; right: 5px; top: 5px; width: 30px; height: 30px;overflow: hidden; padding:0px;" class="selizionaton_in_table"> <a class="remove_item" @click="deleteGroup(g.gid, index2)" style="margin-top:3px; cursor: pointer; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; margin-right: 0px; padding: 5px;" alt="Elimina lista" title="Elimina lista"> <i class="fa fa-minus-circle" aria-hidden="true"></i> </a> </div> </div> </li> </ul> </li> </ul> </div>

  • it is not clear how and what should be .... - Air
  • @Air when hovering the mouse, all hover elements are shown, that is, the minus icon is on the right. I am trying to make sure that there is an icon on the right when hovering over only one cell, and it is displayed only in it. Now when you hover the mouse on any cell, the minus symbol is displayed on all cells at once. And initially it was just required to be specific. - Isabella Monza
  • make a minimal self-sufficient reproducible example ... I don’t see the minus icon there - Air
  • An error in the selector that selects a div with the class selizionaton_in_table. More precisely, this selector selects all divs. Try this - #teamgrouplist li: hover> .selizionaton_in_table - Tolik Ali
  • @Air minus badge is Font Awesome, the code is specified as (<i class = "fa fa-minus-circle" aria-hidden = "true"> </ i>) - Isabella Monza

1 answer 1

Solved the problem which was in CSS style. Rewrote and hover earned it on a specific element:

 #teamgrouplist li:hover .selizionaton_in_table, #teamlist div:hover .selizionaton_in_table{ display: block; }