When hovering over, make sure not to conceal the item

When I hover over the blue table, two red buttons named del-row-td and del-column-td appear. However, they disappear when I move my mouse away from the table.

https://i.sstatic.net/WiWRU.png

I want to prevent these red buttons from disappearing when I hover over them, but still hide them if I move my mouse away from both the buttons and the blue table.

In order to achieve this, I have tried the following code:

$(document).on('mouseover','.del-column-td',function(){
     $(this).removeClass("hide");
   });

$(document).on('mouseleave','.del-column-td',function(){    
   $('.del-column-td').addClass('hide');

});

$(document).on('mouseover','.del-row-td',function(){
     $(this).removeClass("hide");
   });

$(document).on('mouseleave','.del-row-td',function(){   
   $('.del-row-td').addClass('hide');

});

You can view a working demo here. Can anyone provide suggestions on why it's not working and how to fix it?

javascriptjqueryhtmlcss

Answer №1

After removing the hide class, there is a 1-second delay before it gets re-added by your timer:

setTimeout(function(){$($('.del-column-td')).addClass('hide');
$($('.del-row-td')).addClass('hide');},1000);

(Please note that you only need one $( in your code.)

To avoid this issue, save the setTimeout function to a variable:

var timer;
$(document).on('mouseleave','.my-table',function(){ 
   timer = setTimeout(function() {
     $('.del-column-td').addClass('hide');
     $('.del-row-td').addClass('hide');
   }, 1000);  
});

Then clear the timer on mouseover:

$(document).on('mouseover','.del-column-td',function(){
    clearTimeout(timer);
});

$(document).on('mouseover','.del-row-td',function(){
    clearTimeout(timer);
});

Check out the updated Fiddle here

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

I'm having trouble with class attributes not functioning properly in TypeScript within Angular. What steps can I take to resolve this issue

Currently, I am in the process of mastering Angular, CSS (particularly Tailwind), HTML, and TypeScript as a means to construct a website. Despite clicking the menu button on the navigation bar thrice, I was puzzled why this.name appeared as undefined duri ...

htmlangularjstypescripttailwind-css

Issues with font compatibility across different domains

Apologies for the lengthy post, but some background information is necessary before I can pose my question as the situation is quite convoluted. I am faced with the challenge of incorporating two different fonts into a newsletter. The first font, Cyclone ...

htmlcss.htaccessfonts

Unusual visual effect of an SVG line on the bottom border

Can someone tell me if using an svg line creates a strange effect on the border-bottom? https://i.sstatic.net/dPxPh.png This is the HTML code I have: <div id="father"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" style="tran ...

htmlcsssvgcross-browser

"Retrieve the link that is currently being hovered over using jQuery

Hello there! Is it possible to identify the element that is currently being hovered over by the mouse using jQuery? ...

jqueryhovermousehover

Arrangement of div elements tailored to fit the size of the viewport

I am working on creating a grid of divs that will cover the entire viewport. To start, I want to have a grid that is 7 divs wide and 10 divs high. Below is the code snippet I've written so far to set the size of the div elements: function adjustHeig ...

javascriptjqueryhtmlcss

Unexpected PHP Error Thrown

Every time I run this code, I encounter the following error message: Notice: Trying to get property of non-object in C:\wamp\www\HoneysProject\function.php on line 1178 The error pertains to this specific line of code: $number_ph ...

phphtml

Doing AngularJS Controllers Properly

Recently, my colleagues and I have been discussing the optimal approach to creating an AngularJS controller. There are various methods to create one, but my goal is to standardize our team's practices and follow the most effective way. When I refer to ...

javascriptangularjstestingweb-applications

Arrange TD's from various TR's underneath each other in a stack

Imagine we have a table that needs to be made responsive. <table> <tr> <td>Dog Image</td> <td>Cat Image</td> </tr> <tr> <td>Dog Text</td> <td>Cat Text</td> & ...

htmlcssresponsive-designcss-tables

Can someone please suggest a selenium cssSelector alternative for selecting the "nth" element that matches a specific criteria?

My jQuery code retrieves 10 matching elements on a page: $('input.text-form-field'); To target only the 3rd element, I adjusted my code as follows: $('input.text-form-field').get(2); I'm looking for a selenium cssSelector equiv ...

jqueryseleniumselenium-webdrivercss-selectors

Leveraging the Google Geocode API through HTTP GET requests

I am facing a challenge in my HTML file where I have a map and I am using HTTP get with jQuery to retrieve a device's location. However, I am struggling to plot this location on the map. I need to parse the location information and display it accurate ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

What is the best way to create clickable dynamic HTML table data using jQuery?

I'm fairly new to this, but I've managed to successfully create an HTML table dynamically using jQuery. Below is the code that I used: Is there a way to make the table data (value.id) clickable so that it can redirect to a different page? $(d ...

htmljquery

Is there an issue with the functionality of the number input type in HTML 5?

<form name="form" method="get" action="" > Number : <input type="number" name="num" id="num" min="1" max="5" required="required"/> <br/> Email : <input type="email" name="email" id="email" required="required"/> <br /> <in ...

html

Disable the clear button on input fields for Internet Explorer version 8

Struggling with a form issue in IE8 where the input fields display a clear button, as seen below: My attempt to fix this by adding the following CSS rule was unsuccessful: .someinput::-ms-clear { display: none; } Unfortunately, this solution does no ...

htmlcssinternet-explorer-8

The function does not provide an output of an Object

I have two JavaScript classes, Controller.js and Events.js. I am calling a XML Parser from Events.js in Controller.js. The Parser is functioning but not returning anything: SceneEvent.prototype.handleKeyDown = function (keyCode) { switch (keyCode) { ...

javascriptjquerysamsung-smart-tv

What sets apart "config" from "defaults" in Sencha Touch?

As a newcomer to Sencha Touch, I have one simple question that's been on my mind... Can someone explain the distinction between "config" and "defaults" in Sencha Touch? ...

javascriptextjslayouttouch

What is the method for retrieving the value of a checkbox when clicked?

Managing a dynamically created HTML table with checkbox values can be tricky, especially when the value needs to reflect changes in real-time. If you are struggling to update the status of the checkboxes based on database values and pass that information t ...

phpjqueryhtml

What is the process for updating the header of the group column from "Group" to "my custom heading"?

In my project, I need to replace the header "Group" with "MyCustomHeading". I am implementing this change using treeData in Material UI. ...

javascriptreactjsmaterial-ui

Aligning a button and textbox to have equal heights side by side

Is there a way to update the default form styling for two form elements so that the text box and button have the same height and are positioned side by side to create the illusion of one element? While it appears correctly in some browsers, in others they ...

css

Change the background color of a MUI ToggleButton based on a dynamic selection

const StyledToggleButton = styled(MuiToggleButton)(({ selectedColor }) => ({ "&.Mui-selected, &.Mui-selected:hover": { backgroundColor: selectedColor, } })); const FilterTeam = (props) => { const [view, setView] = ...

javascriptreactjstypescriptmaterial-ui

Utilizing Jquery AJAX to send data to PHP servers

As someone new to Jquery AJAX, I came across a modal form from jquery UI that was only appending tables to the existing HTML document. What I actually need is a way to pass these variables to PHP so that I can utilize them for my database. Here is the link ...

phpjqueryajax