3

I have a table that has a bunch of rows that I need to be both editable and deletable. I've made a <div> which contains a couple of buttons that I want to show up in the relevant position when the rows are hovered. This is all fine. I also want the buttons to disappear when the mouse leaves the table itself. OK, I'll use the mouseleave event, I thought. Unfortunately this is fired when the mouse enters the buttons <div> too, leading to a feedback loop where the buttons constantly show and hide.

This is quite difficult to describe, but hopefully this is illustrative: https://jsfiddle.net/8d726rqt/

I did try to find an answer already, and there are many where the shown and hidden items are children of the parent element, but that's not the case for me, so these solutions don't work. Furthermore, it's often suggested to use pointer-events: none. This does work, but then the buttons don't receive click events, defeating the point.

3 Answers 3

3

#edit-control is not inside #top-level-table. Therefore when #edit-control appears and mouse is over it, it triggers the mouseleave event. Then button disappears and mouse enter table again. Thus button appears again. And it becomes a loop, where button keeps showing hiding.

I suggest adding mouseleave event to the wrapper div of #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');
  });
  
  //change 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>

2
  • Awesome, thanks! Clean and neat. I did have edit-controls as a direct child of the table at one point, but that presumably isn't something that's allowed.
    – Tim Angus
    Jun 27, 2019 at 14:28
  • That's right. div shouldn't be added as a direct child of table .
    – joohong89
    Jun 27, 2019 at 14:38
1

If buttons block placed some other place, than table you might use 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();
    }
  });
});

here is jsfiddle: https://jsfiddle.net/kinos/pbg8dhvr/13/

0

On the div property:

<div onMouseLeave={(e) => e.preventDefault()}>
....
</div>
1
  • I'm not following, presumably you mean the edit-controls div? Maybe you could fork the jsfiddle to show me what you mean? Thanks.
    – Tim Angus
    Jun 27, 2019 at 14:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.