visibility: visible ne fonctionne pas

Question

J'ai ce code

<style> 

    #checkboxDIV { 
     visibility: hidden; 
    } 

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

    #options { 
     visibility: hidden; 
    } 

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

</style> 

Quand je déplace ma souris sur #itemcard, cela fonctionne pour #options et montre #options DIV,

Mais il ne fonctionne pas #checkboxDIV - Je suis pas sûr de ce qui cause, S'il vous plaît voir le code HTML en bas

une idée?

EDIT: Ajout HTML pour une meilleure compréhension

@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

vous devez ajouter cette

<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>