Do not trigger mouseleave events when absolute positioned elements have overlapping layers

I am facing a challenge with a table that includes multiple rows that need to be editable and deletable. To achieve this, I have created a <div> containing buttons that should appear when hovering over the rows. While this setup works well, I am encountering an issue where the buttons continue to display and hide in a loop when the mouse moves over them. I attempted to use the mouseleave event to address this, but it triggered even when hovering over the buttons, creating the unwanted loop.

For a visual representation of the issue, you can visit this link: https://jsfiddle.net/8d726rqt/

I have searched for a solution and found recommendations where the shown and hidden elements are children of the parent element, which does not apply to my scenario. Additionally, suggestions to use pointer-events: none have been made, but this approach prevents the buttons from receiving click events, which is not ideal for my situation.

javascriptjqueryhtmlcss

Answer №1

#edit-control is not located within #top-level-table. As a result, when #edit-control is displayed and the mouse hovers over it, it triggers the mouseleave event. This causes the button to disappear and the mouse to re-enter the table, leading to the reappearance of the button. This creates a continuous loop where the button keeps alternating between showing and hiding.

My suggestion is to add the mouseleave event to the wrapper div that contains both #edit-control and #top-level-table.

$(function()
  {
  $('.list-row').mouseover(function()
                           {
    var offset = $(this).offset();
    $('#edit-controls').css({
      'top': offset.top + 10,
      'left': offset.left + 10
    }).fadeIn();
    //console.log('fadein');
  });
  
  //update to this element with mouseleave event
  $('#table-wrapper').mouseleave(function()
                                   {
   // console.log('fadeout');
    $('#edit-controls').fadeOut();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script crossorigin="anonymous" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="table-responsive" id="table-wrapper">
                <table id="top-level-table" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Table</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="list-row">
                            <td>Content<br><br>Things</td>
                        </tr>
                        <tr class="list-row">
                            <td>Content<br><br>Things</td>
                        </tr>
                        <tr class="list-row">
                            <td>Content<br><br>Things</td>
                        </tr>
                        <tr class="list-row">
                            <td>Content<br><br>Things</td>
                        </tr>
                    </tbody>
                </table>
                <div id="edit-controls" style="display:none; position:absolute; z-index:1" >
                    <button type="button" class="btn btn-primary">Edit</button>
                    <button type="button" class="btn btn-danger">Delete</button>
                </div>
            </div>
        </div>
    </body>
</html>

Answer №2

If you need to place buttons in a different location than the table, you can implement this solution:

<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script crossorigin="anonymous" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="table-responsive">
            <table id="top-level-table" class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Table</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="list-row">
                        <td>Content<br><br>Things</td>
                    </tr>
                    <tr class="list-row">
                        <td>Content<br><br>Things</td>
                    </tr>
                    <tr class="list-row">
                        <td>Content<br><br>Things</td>
                    </tr>
                    <tr class="list-row">
                        <td>Content<br><br>Things</td>
                    </tr>
                </tbody>
            </table>
            <div id="edit-controls" style="display:none; position:absolute; z-index:1">
                <button id="edit" type="button" class="btn btn-primary">Edit</button>
                <button id="delete" type="button" class="btn btn-danger">Delete</button>
            </div>
        </div>
    </div>
</body>


$(function()
  {
  $('.list-row').mouseover(function()
                           {
    var offset = $(this).offset();
    $('#edit-controls').css({
      'top': offset.top + 10,
      'left': offset.left + 10
    }).fadeIn();
    console.log('fadein');
  });

  $('#top-level-table').mouseleave(function(event)
                                   {
    if (event.relatedTarget.id !== 'edit' &&
    event.relatedTarget.id !== 'delete' &&
        event.relatedTarget.id !== 'edit-controlls')        {
        $('#edit-controls').fadeOut();
    }
  });
});

Check it out on jsfiddle: https://jsfiddle.net/kinos/pbg8dhvr/13/

Answer №3

Regarding the div attribute:

<div onMouseLeave={(e) => e.preventDefault()}>
....
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with nested promises not functioning as anticipated within a for loop

I'm currently facing an issue with extending a Promise inside a .then() block. My goal is to update records in the database using a for-loop and then close the database after all updates have been processed. However, the application is exiting abruptl ...

javascriptnode.jsmongodbpromise

Disappear solely upon clicking on the menu

Currently, I am working on implementing navigation for menu items. The functionality I want to achieve is that when a user hovers over a menu item, it extends, and when they move the mouse away, it retracts. I have been able to make the menu stay in the ex ...

javascriptjqueryhtmlcss

What is the process for invoking a server-side C# method from AJAX while transmitting parameters to the function using CommandArgument?

My C# method is responsible for saving data to a SQL Server. It is called from an Onlick event, passing parameters using CommandArgument. Here is an example: <asp:LinkButton runat="server" onClick="save" CommandArgument='<%# Eval("post_id").ToS ...

javascriptc#jqueryasp.netajax

Verify if the specified value is present in the dropdown using AngularJS

Utilizing AngularJS, I have implemented an input field with autocomplete functionality. The autocomplete feature pulls data from a JSON file and displays it in a dropdown table format. Users are able to filter the results and select a value from the dropdo ...

javascripthtmlangularjsvalidation

Upon clicking the link, the JavaScript functionality failed to activate

When I click on a link and try to add a class, it's not working. I want to create a "modal" div. Here is the PHP/HTML code: <?php if(isset($_GET['ido'])) { ?> <div id="modal" class="modal" style="background: blue; width: 1 ...

javascriptphpjqueryhtml

Problem with CSS creating the Typewriter effect when the third line of text is added

I've been working on a website for my new company and I want to incorporate a typewriter effect on the main page. I came across a tutorial on Medium.com but I'm having trouble adding an additional span to the provided code. Take a look at the lin ...

htmlcss

How can I ensure that my style.scss file effectively interacts with my stylesheet by including imports for "variables", "globals", and "header"?

Currently, I am in the process of learning how to utilize Sass and JavaScript through VS Code. Within my project structure, I have an "app" folder where my js folder resides containing script.js, as well as a scss folder holding _globals.scss, _header.scss ...

htmlstylesnav

Issue with CSS wrapper background not displaying

I am currently working with a layout that looks like this: <div class="contentWrapper"> <div class="left_side"></div> <div class="right_side"></div> </div> The contentWrapper class is styled as follows: .contentWrappe ...

cssbackgroundcss-float

Issue with video not displaying in EJS template on node.js server

I have successfully uploaded a video using a node.js server and saved the FilePath to MongoDB in my /public/uploads folder. Within my ejs file, I am trying to display videos using the following code snippet: //Videos is an array of objects retrieved from ...

htmlnode.jsexpressejs

Looking for assistance with hiding the dropdown icon in the <Select> component of material-ui framework

Currently, I am utilizing the Select component from material-ui. According to the documentation of material-ui, it is possible to customize the CSS of components by using the tag sx={{ ... }}. My goal is to style the component with a className of '.Mu ...

cssreactjsmaterial-ui

Having difficulties achieving successful API requests in Next.js and Snipcart

I'm currently diving into the world of Snipcart, and I'm encountering some issues connecting to your API. I'm using Next.js and haven't been able to find any solutions on the forum or in the documentation that address my specific proble ...

javascriptnext.jssnipcart

What is the reason behind the cautionary note associated with Vue's provide and inject functionality?

Considering incorporating Vue's new provide/inject feature into a project, I came across a warning in the official Vue documentation: The documentation states that provide and inject are primarily intended for advanced plugin/component library usage ...

javascriptvue.jsvuejs2

Issue with React conditional display not functioning properly post user input into a form

Thank you in advance for your help. I am working on a component that displays a button based on the const results. However, I noticed that when I insert "Balaton," the button only appears after I add another character to the string. So the string becomes ...

javascriptreactjs

Adding CSS styling to a particular component within your Vue application using Vuetify JS

Imagine having a Test.vue file containing 2 v-text-field components. I'm looking to style only the first text field using CSS. Test.vue <template> <div class="test"> <v-text-field></v-text-field> <v-tex ...

javascriptvue.jsvuetify.js

The functionality of arrow functions when not inside an ES6 React class constructor

I encountered an interesting problem in a project that uses React and React-Redux with ES6 (compiled through Babel): class HomeScreen extends React.Component { // Here is the problematic code: showLockTimer = setTimeout(this.authenticate, 2000); l ...

javascriptreactjsecmascript-6react-reduxarrow-functions

Firebase hosting adjusts the transparency of an element to 1% whenever it detects the presence of CSS opacity

I'm currently working on a website using Vue.js and Firebase. Everything runs smoothly locally, including a button with a desired low opacity. However, when I deploy the site to Firebase Hosting, the button's opacity inexplicably changes to 1% an ...

cssvue.jssassfirebase-hosting

It is important for the button size to remain consistent, regardless of any increase in text content

My goal was to keep the button size fixed, even as the text on it grows. This is the current code I am using: .button { border: none; color: white; padding: 10px 50px; text-align: center; text-decoration: none; display: inline-block; font ...

javascripthtmlcss

Problem encountered with imaskJS in handling the formatting of data with forward slashes

After conducting tests on the frontend of the imask website at , it has been verified that utilizing a forward slash for date formatting results in the exclusion of the final digit of the date. Various attempts were made, including: IMask( field, ...

javascriptnpmimaskjs

How can I store Ajax data in integer format?

I am attempting to retrieve data from a PHP page using ajax and then save it in a variable that will be used in a while loop. I have successfully displayed the number on the screen, confirming that the data retrieval is functioning. However, I am encounte ...

phpjqueryajax

Ways to access the value of an attribute in an AngularJS object

Is there a way to access the value of field.jobtype within a controller? var app=angular.module('myapp',['ui.bootstrap','ui.select']); app.controller('mycontroller',function($scope){ $scope.onStateSelected = func ...

angularjshtmljquery-select2ui-select