使删除按钮仅在悬停在该行上时出现。使用引导

Posted

技术标签:

【中文标题】使删除按钮仅在悬停在该行上时出现。使用引导【英文标题】:making the delete button appears only when hovering over the row. Using Bootstrap 【发布时间】:2021-11-14 14:02:12 【问题描述】:

我正在尝试使删除按钮仅出现在用户将鼠标悬停在其上方的行上。我使用 CSS 完成了它,但我试图找到一种使用 Bootstrap 的方法。这是代码的sn-p。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></head>
<body>

<div class="container-fluid">
    <form id="search_form">
        <div id="search_row" class="search-details">
            <div class="search_data">
                    <section id="form_input_section" class="d-flex flex-column">

                    </section>
                    <section id="form_add_button_row" class="d-flex flex-row flex-fill justify-content-around align-items-center form-group">

                        <input type="text" class="form-control col-4" id="inlineFormInput" placeholder="Input...">
                        <button type="button" id="btn_remove_row" >Delete</button>
                    </section>
            </div>
        </div>
    </form>
</div>

</body>
</html>

【问题讨论】:

欢迎来到 SO。首先,你将鼠标悬停在一个 div 上,而不是一行,尽管你用row 标识它。行是 html 术语表中的tr。其次,你的 CSS 和/或你的 javascript 在哪里(在技术上你不需要,但可能会添加一个动作)。没有它,我们无能为力。另外,我们不是为您编写的,我们只是想用更正确的代码给您指点或将您推向正确的方向。无论如何,为此必须查看CSS,有一个主要目标和一个子目标,所以说#btn_remove_rowdisplay: none,然后再打电话#search_row:hover #btn_remove_rowdisplay: block 感谢您的反馈。这将在未来帮助我。 【参考方案1】:

这就是你的答案,正如我之前在 cmets 中所说的那样。您需要一个开始状态,在您的情况下,这将是您的 id #btn_remove_row 上的 display: none,当您将鼠标悬停在 #search_row 上时,您将再次定位 #btn_remove_row 特定的 id 以把握它的视角。

这里的工作示例:https://www.codeply.com/p/HmGBqPCgnF

或根据您的代码提供

#btn_remove_rowdisplay: none 
#search_row:hover #btn_remove_rowdisplay: block

我建议将其设为表格并使用类,而不是 ID。这将为您提供更多控制权并帮助您正确对齐所有内容。

【讨论】:

谢谢!我会将其更改为表格并使用类。我不确定这是否是一个好方法。再次感谢。 如果此遮阳篷解决了您的问题,您是否愿意将遮阳篷标记为已接受(并最好对其进行评分),以便其他人知道它已解决。

以上是关于使删除按钮仅在悬停在该行上时出现。使用引导的主要内容,如果未能解决你的问题,请参考以下文章

仅当我将鼠标悬停在其上时如何使图像出现

bootstrap 4,光标悬停在按钮上时不会改变,但在锚点上会改变

仅在悬停时显示按钮

仅在鼠标悬停 div 时显示滚动条

鼠标悬停在rails中的按钮上时弹出内容

悬停列表项上的引导导航栏删除类活动,鼠标移出返回类活动