What could be causing the element to remain visible even after the mouse has left the area?

Is there a way to make the slider-paging disappear immediately when the mouse leaves the media-slider-wrap instead of it continuing to follow the cursor? It seems to linger if you move the cursor slowly out of the div...

Any suggestions on how to fix this issue?

Check out this Codepen for reference

$(document).ready(function(){
  $(".slider").each(function () {
      _this = $(this);

      _this.mousemove(function(e){
          var offset = _this.offset();
          var rect = e.currentTarget.getBoundingClientRect();

          var x = (e.clientX - rect.left);
          var y = (e.clientY - rect.top);

          $(this).find('.slider-paging').show();
          $(this).find('.slider-paging').css("top", y).css("left", x);

      });
      _this.mouseleave(function(e){
          $(this).find('.slider-paging').hide();
      });

  });
});
.media-slider-wrap {
  width: fit-content;
}
.slider-paging {
  position: absolute;
  top: 0;
  left: 0;
  display:none;
}
.slider-image {
  height: 500px;
  width: 500px;
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section class="media-slider-wrap">
  <div class="slider">
     <div class="slider-image"></div>
     <div class="slider-paging">1/4</div>
  </div>
</section>

javascripthtmljquerycss

Answer №1

No position was specified for the .media-slider-wrap element

.media-slider-wrap {
  /* margin: 100px; */
  position: relative;
  width: fit-content;
  /* make it work with firefox */
  width: -moz-fit-content;
}

Answer №2

I made some adjustments to the code on codepen that seems to be influenced by Why is the element not disappearing when mouse leaves area?. It's working properly now.

$(document).ready(function () {
  $(".media-slider-wrap").each(function () {
    const _this = $(this);
    _this.find('.slider-image').mousemove(function (e) {
      var offset = _this.offset();
      var rect = e.currentTarget.getBoundingClientRect();
      var x = (e.clientX - rect.left);
      var y = (e.clientY - rect.top);
      const sliderPaging = _this.find('.slider-paging');
      const moveX = x > rect.width - sliderPaging.width() ? rect.width - sliderPaging.width() : x;
      const moveY = y > rect.height - sliderPaging.height() ? rect.height - sliderPaging.height() : y;
      sliderPaging.show();
      sliderPaging
        .css("top", Math.max(moveY, rect.top))
        .css("left", Math.max(moveX, rect.left));
    });
    _this.find('.slider-image').mouseleave(function (e) {
      _this.find('.slider-paging').hide();
    });
  });
});
.media-slider-wrap {
  width: fit-content;
  margin-top: 100px;
  margin-left: 100px;
}

.slider-paging {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.slider-image {
  height: 500px;
  width: 500px;
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="media-slider-wrap">
  <div class="slider-image"></div>
  <div class="slider-paging">1/4</div>
</section>

Answer №3

The problem lies in the behavior of your ".slider-paging" element, which follows your cursor's movement and interferes with the proper execution of the mouseleave function. To resolve this issue, you need to ensure that the ".slider-paging" element stays within the boundaries of the red box. This means restricting the movement of the top and left properties of the ".slider-paging" element to stay within the confines of the rectangle.

Solution: The left position should be limited from the left edge to the right edge of the rectangle. Similarly, the top position should be restricted from the top edge to the bottom edge of the rectangle.

Below is the corrected code:

$(document).ready(function () {
  $(".media-slider-wrap").each(function () {
    const _this = $(this);
    _this.mousemove(function (e) {
      var offset = _this.offset();
      var rect = e.currentTarget.getBoundingClientRect();
      var x = (e.clientX - rect.left);
      var y = (e.clientY - rect.top);
      const sliderPaging = $(this).find('.slider-paging');
      const moveX = x > rect.width - sliderPaging.width() ? rect.width - sliderPaging.width() : x;
      const moveY = y > rect.height - sliderPaging.height() ? rect.height - sliderPaging.height() : y;
      sliderPaging.show();
      sliderPaging
        .css("top", Math.max(moveY, rect.top))
        .css("left", Math.max(moveX, rect.left));
    });
    _this.mouseleave(function (e) {
      $(this).find('.slider-paging').hide();
    });
  });
});
.media-slider-wrap {
  width: fit-content;
}

.slider-paging {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.slider-image {
  height: 500px;
  width: 500px;
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="media-slider-wrap">
  <div class="slider-image"></div>
  <div class="slider-paging">1/4</div>
</section>

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

The URL switches back and forth from "localhost:8100" to "localhost:8100/some-route" while displaying a blank white screen

After working on my ionic app without any issues, I restarted my computer only to find that when I tried to run the project again, I was met with a blank white screen on both the browser and device. Even when I reverted back to an earlier branch, the URL c ...

javascriptangularjsionic-frameworklocalhostpromise

jQuery - translating and organizing names of countries

I have implemented a jQuery function to organize a list of country names based on the user's selected language code (via a language select dropdown). You can find more information on this topic in this related post. The translation of country names s ...

javascriptjqueryhtmlsorting

Fade out the div element when clicked

For my game project, I needed a way to make a div fade out after an onclick event. However, the issue I encountered was that after fading out, the div would reappear. Ideally, I wanted it to simply disappear without any sort of fade effect. Below is the co ...

javascripthtmlcssonclick

Angular 6: Simplify Your Navigation with Step Navigation

Can someone please assist me with configuring a navigation step? I tried using viewchild without success and also attempted to create a function with an index++ for three components on the same page. However, I am unable to achieve the desired outcome. Any ...

javascriptangularviewchild

What are the best practices for utilizing *ngIf?

In my Angular project, I am facing a challenge with using *ngIf. My app.component.html file handles both the login page and the dashboard. I want to hide the dashboard until the user logs in. To achieve this, I decided to use *ngIf. Here is how I implement ...

javascripthtmlangulartypescript

When jQuery is used to move rows between tables, it can interfere with

When moving rows between tables, everything seems to work fine. However, once the row is moved to the other table, all JavaScript functions related to that row stop working, and the reason remains unknown. The JavaScript code is simple - it involves takin ...

javascriptjqueryhtmltablesorter

Exploring the benefits of utilizing ChartJs within a VueJs component

I'm currently working on using Chartjs to create and control a chart within a Vue component. I'm feeling a bit lost as to where exactly in the script tags I should initialize the chart instance var myChart = new Chart(ctx, {...}); after importing ...

javascriptvue.jschart.jsvuetify.js

activate a single on.click event to trigger additional actions - utilizing javascript and jQuery

My website features dynamically generated buttons that lead to specific pages. The challenge I'm facing is retrieving the automatically generated data-num value for each button and using it as a jQuery selector to redirect users to the corresponding p ...

javascriptjqueryonclick

What is the best way to enhance accuracy when hovering?

Have you ever noticed that the bottom menu becomes less precise when hovering over it on certain browsers? While Firefox seems to handle it perfectly, other browsers lack that smooth "snap" effect as you move through the numbers. I'm trying to find a ...

htmlcsshoverscale

Mastering the art of utilizing callbacks in AngularJS for consuming an API

Having trouble handling data from an API and structuring it effectively before passing it to the controller. I've created a factory that retrieves user data from the API, but the provideAllUserData function is causing issues. Below is my services.js: ...

javascriptangularjs

How can I center two divs within a wrapper div without also centering all the text inside?

Is there a method other than using display: inline-block and text-align:center that allows us to center two divs inside a wrapper div? I prefer not to have my text centered. ...

htmlcss

Why is my inline-block property causing my elements to stack vertically instead of aligning them horizontally from left to right?

Working on a dynamic layout using divs with display:inline-block to accommodate varying content heights. However, the displayed order of my divs is not as expected. 1357 2468 I would like them to display as: 1234 5678 My code snippet: article{ -moz-c ...

htmlcss

Having trouble passing variables to if statements in a node.js ejs template using datatables

Hey there, evening greetings to everyone! I understand that I am working with an older stack, but it serves as my initial step in getting something operational before transitioning to a different stack with more features. Currently, I have a Node.JS appli ...

javascriptnode.jsexpressif-statementejs

Using JQuery functions from other JavaScript files is Simple

When it comes to my CSS, I have taken the approach of creating smaller files for specific functions and then using minification to merge and compress them into one file for easier download. I want to apply the same strategy to my JS Files by logically sep ...

jqueryhtmlcss

Combining the results of two separate API requests using jQuery/ajax

Hello there, Internet World! This is my first post here, so please be kind. I have gained a lot of valuable knowledge from this site so far, and now I am in need of some help. I have experimented with various code variations such as $when & $then, fu ...

javascriptjqueryjsonajaxblockchain

A mixed type array of objects is supported in Mongoose, allowing for the use of

I am having an issue with my controller edit card, where I update the fields of cardsArray object. The cardsArray is a mixed type object as the fields of each card object are different, so I am storing mixed.type. While pushing new cards using the addCard ...

javascriptnode.jsmongodbmongoosemern

jQuery validation green checkmark

Hey there, I seem to be a bit stuck with this one... I'm trying to implement a success checkmark or indicator for validating user input in my form. The script below outlines what I'm attempting to achieve: $('document').ready(function( ...

jqueryjquery-validate

How can I tailor the child count in ag grid to fit my needs?

Currently, I am using ag grid with React and have successfully implemented row grouping. However, the parent rows are displaying child row counts in numeric values. Is there a way to customize the style of the row count? Additionally, I am interested in ca ...

javascriptag-gridag-grid-angularag-grid-reactag-grid-vue

The NgbTooltip does not activate when hovering over a <td> cell

I'm currently facing an issue with implementing ngbTooltip on <table> elements. Initially, I had trouble with <th>, but that was resolved by using the container attribute after referring to this helpful post. The main challenge arises ...

htmlangularbootstrap-4ng-bootstrap

The file upload process did not return a successful response for Ajax

Recently delved into the world of Ajax and encountered a perplexing issue. Here is the dilemma: I successfully upload a .csv file to the server. However, after the upload "success" in the ajax call fails to trigger a response. Neither does complete or er ...

javascriptphpajax