Sichtbarkeit: sichtbar nicht funktioniert

Question

Ich habe diesen Code

<style> 

    #checkboxDIV { 
     visibility: hidden; 
    } 

    #itemcard:hover #checkboxDIV { 
     visibility: visible; 
    } 

    #options { 
     visibility: hidden; 
    } 

    #itemcard:hover #options { 
     visibility: visible; 
    } 

</style> 

Wenn ich meine Maus auf #itemcard bewegen, funktioniert es für #OPTIONS und zeigt #options DIV,

Aber es funktioniert nicht #checkboxDIV - Ich bin nicht sicher, was es verursacht, siehe unten den HTML-Code

keine Idee?

EDIT: HTML für ein besseres Verständnis Hinzufügen

@foreach (var I in Model) 
{ 
    <tr id="row_@I._id"> 
     <td class="v-align-top" > 
      <div class="checkbox text-center" id="checkboxDIV"> 
       <input type="checkbox" value="@I._id" id="checkbox_@I._id)"> 
       <label for="checkbox_@I._id"></label> 
      </div> 
     </td> 
     <td class="v-align-top" id="itemcard"> 
      <div id="options">OPTIONS<div> 
     </td> 
    </tr> 
} 

Answer 1

müssen Sie diese

<td class="v-align-top" id="itemcard" > 

#checkboxDIV { 
 
     visibility: hidden; 
 
    } 
 

 
    #itemcard:hover #checkboxDIV { 
 
     visibility: visible; 
 
    } 
 

 
    #options { 
 
     visibility: hidden; 
 
    } 
 

 
    #itemcard2:hover #options { 
 
     visibility: visible; 
 
    }

<table> 
 
<tr id=""> 
 
     <td class="v-align-top" id="itemcard" > 
 
      <div class="checkbox text-center" id="checkboxDIV"> 
 
       <input type="checkbox" value="@I._id" id="checkbox_@I._id)"> 
 
       <label for="checkbox_@I._id"></label> 
 
      </div> 
 
     </td> 
 
     <td class="v-align-top" id="itemcard2"> 
 
      <div id="options">OPTIONS<div> 
 
     </td> 
 
    </tr> 
 
    </table>