JavaScript-仅当鼠标悬停在行上时才显示“删除”按钮。使用引导程序-堆栈溢出

顺晟科技

2022-10-18 13:32:17

120

我正在尝试使删除按钮只出现在用户悬停在它上面的行。我是用CSS做的，但我试图找到一种使用引导程序的方法。下面是代码的一个片段。

<代码><；！文档类型HTML>；<；HTML（>；）<；头部>；<；元名称="；视口"；内容="；宽度=设备宽度，初始比例=1"；>；<；link rel="；样式表"；href="；https：//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><；身体>；<；DIV类="；流体容器"；>；<；表单ID="；搜索_表单"；>；<；DIV ID="；搜索_行"；类="；搜索详情"；>；<；DIV类="；搜索_数据"；>；<；段ID="；窗体_输入_段"；类="；D-Flex柔性柱"；>；<；/部分>；<；节ID="；窗体_添加_按钮_行"；类="；D-Flex伸缩-行伸缩-填充对齐-内容-周围对齐-项目-中心表单-组"；>；<；输入类型="；文本"；类="；表单控制COL-4"；ID="；InlineForminput"；Placeholder="；输入.."；>；<；按钮类型="；按钮"；ID="；btn_删除_行"；>；删除<；/按钮>；<；/部分>；<；/DIV>；<；/DIV>；<；/窗体>；<；/DIV>；<；/正文>；<；/HTML>；

顺晟科技：

正如我之前在评论中所写的，

这就是你的答案。您需要一个开始状态，在您的示例中，该状态将是<!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>On Your IDdisplay: none，并且当您将鼠标悬停在#btn_remove_row

我建议让它成为一个表，并使用类，而不是ID.这将给你更多的控制，并帮助你正确地对齐一切。

上一篇：JavaScript-如何在标签上加下一篇：HTML-获取JavaScript中

网站建设

Html

JavaScript-仅当鼠标悬停在行上时才显示“删除”按钮。使用引导程序-堆栈溢出