如何在图像鼠标悬停上显示复选框？

Question

我正在使用BlueImp图库将灯箱添加到我的图库。因此，我想在图像的topleft角上显示鼠标悬停复选框，当我选中复选框时，它应始终显示在图像上。

<div id="links">
    @foreach (var images in Model)
    {
        <a href="@Url.Content("~/ImageGallery/" + images.Imgs)" data-gallery>
            <img src="@Url.Content("~/ImageGallery/thumbnails/" + images.Imgs)">
        </a>
        @Html.CheckBox("delete_CheckBox", false, new { Value = images.Imgs })
    }

</div>

现在它显示为这样，复选框始终显示（红色圆圈）。只有当鼠标悬停在图像的左上角（黑色方框）和选择复选框时，我才想要显示复选框。

我如何处理css或jquery？

生成的HTML

     <div id="links">
        <a href="/ImageGallery/11.jpg" data-gallery>
           <img src="/ImageGallery/thumbnails/11.jpg">
        </a>
        <input Value="11.jpg" id="delete_CheckBox" name="delete_CheckBox" type="checkbox" 
         value="true" />
         <input name="delete_CheckBox" type="hidden" value="false" />  

         <a href="/ImageGallery/Chrysanthemum.jpg" data-gallery>
            <img src="/ImageGallery/thumbnails/Chrysanthemum.jpg">
         </a>
        <input Value="Chrysanthemum.jpg" id="delete_CheckBox" name="delete_CheckBox" 
        type="checkbox" value="true" />
        <input name="delete_CheckBox" type="hidden" value="false" />  

        <a href="/ImageGallery/Desert.jpg" data-gallery>
           <img src="/ImageGallery/thumbnails/Desert.jpg">
        </a>
        <input Value="Desert.jpg" id="delete_CheckBox" name="delete_CheckBox" 
        type="checkbox" value="true" />
        <input name="delete_CheckBox" type="hidden" value="false" />                

        <a href="/ImageGallery/google.png" data-gallery>
           <img src="/ImageGallery/thumbnails/google.png">
        </a>
        <input Value="google.png" id="delete_CheckBox" name="delete_CheckBox" 
        type="checkbox" value="true" />
        <input name="delete_CheckBox" type="hidden" value="false" />                

        <a href="/ImageGallery/Hydrangeas.jpg" data-gallery>
           <img src="/ImageGallery/thumbnails/Hydrangeas.jpg">
        </a>
        <input Value="Hydrangeas.jpg" id="delete_CheckBox" name="delete_CheckBox" 
        type="checkbox" value="true" />
        <input name="delete_CheckBox" type="hidden" value="false" />                

        <a href="/ImageGallery/Jellyfish.jpg" data-gallery>
           <img src="/ImageGallery/thumbnails/Jellyfish.jpg">
        </a>
        <input Value="Jellyfish.jpg" id="delete_CheckBox" name="delete_CheckBox" 
        type="checkbox" value="true" />
        <input name="delete_CheckBox" type="hidden" value="false" />                

</div>

Answer 1

要定位复选框，我通常只需在相对位置的整个事物（在foreach内部）添加一个div，然后将复选框放在绝对位置。在你的情况下，你想从左上角开始做4px。

要隐藏该复选框，您可以将复选框的css默认设置为隐藏，并显示在：选中的选择器上。

悬停是最棘手的事。不要将复选框的css设置为隐藏，而是将不透明度设置为0.然后使用：hover选择器将不透明度设置为1.

那就是它。如果您需要准确的代码示例或说明，我可以在这里添加更多。