javascript - 如何在图像鼠标悬停时显示复选框？

Question

我正在使用 BlueImp Gallery 将灯箱添加到我的图片库中。所以，我想在图像左上角的鼠标悬停时显示一个复选框，当我选择复选框时，它应该始终显示在图像上。

<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

为了放置复选框，我通常只是在整个事物周围添加一个 div(就在您的 foreach 内部)并具有相对位置，然后将复选框放在其中并具有绝对位置。在你的情况下，你想从顶部和左侧开始 4px。

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

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

就是这样。如果您确实需要代码示例或说明，我可以在此处添加更多内容。