html - visibility : visible not working

Question

我有这个代码

<style>

    #checkboxDIV {
        visibility: hidden;
    }

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

    #options {
        visibility: hidden;
    }

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

</style>

当我将鼠标移到 #itemcard 上时，它适用于 #options 并显示 #options DIV，

但它不起作用#checkboxDIV - 我不确定是什么原因造成的，请查看底部的 HTML 代码

有什么想法吗？

编辑:添加 HTML 以便更好地理解

@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

你需要添加这个

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