html - 如何将悬停按钮添加到卡片 View 中

Question

我想在将鼠标悬停后将编辑和删除按钮添加到卡片 View 中。 这是我的代码

<div class="card">  //image section
    <img class="card-img-top" alt="Card image" style="width:50%" src="images/img1">
    <div class="card-body">
    <div class="button" onClick="updateData()">
        <i class="fa fa-edit" style="font-size:24px"></i>
    </div>
    <div class="button" onClick="deleteData()">
        <span aria-hidden="true" style="font-size:40px">&times;</span>
    </div>'
    <p class="card-text">Text description</p>
    </div>
</div>

我想当我将鼠标悬停在卡片上时显示两个按钮。我怎样才能做到这一点？

Answer 1

使用下面的选择器

   button {
   display: none; /* Hide button */
   }

   .divbutton:hover button {
   display: block; /* On :hover of div show button */
   }

演示

.card {
    height: 30px;
    background: #000;
}

button {
    display: none;
}

.card:hover button {
    display: block;
}

<script src="https://use.fontawesome.com/3aa0d20210.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c5c8c8d3d4d3d5c6d7e79389928994" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="card"> 
    <img class="card-img-top" alt="Card image" style="width:50%" src="images/img1">
    <div class="card-body">
    <button class="button" onClick="updateData()">
        <i class="fa fa-edit" style="font-size:24px"></i>
    </button>
    <button class="button" onClick="deleteData()">
        <span aria-hidden="true" style="font-size:40px">&times;               </span>
    </button>'
    <p class="card-text">Text description</p>
    </div>
</div>

还要确保为 div 元素分配一些 height 或 min-height，否则它将是 0 code> 因为它不包含任何内容。另外，不要使用 display: none; 作为内联样式，因为内联样式具有最高的特异性，因此，您将被迫使用 !important ，这是不好的。

在上面的示例中，我使用 button {/*Styles*/} 但这是一个通用元素选择器，因此请确保为您的 定义一个 class >按钮元素。