Estoy tratando de hacer que el botón Eliminar solo aparezca en la fila en la que el usuario pasa el mouse sobre él. Lo hice usando CSS pero estoy tratando de encontrar una manera de hacerlo usando Bootstrap. aquí hay un fragmento del código.
<!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>Así que aquí está su respuesta, como puse en los comentarios anteriores. Necesita un estado de inicio, que en su caso será la display: none en su id #btn_remove_row y mientras pasa el cursor sobre #search_row , apunta a la identificación específica #btn_remove_row nuevamente para cambiar su perspectiva.
Ejemplo de trabajo aquí: https://www.codeply.com/p/HmGBqPCgnF
O como su código proporciona
#btn_remove_row{display: none} #search_row:hover #btn_remove_row{display: block}Sugiero convertirlo en una tabla y usar clases, en lugar de ID. Esto te dará más control y te ayudará a alinear todo correctamente.