Absolute Div Keeps On Flickering If I Move My Mouse

Here is what i have achieved so far: A div will appear on the pointer of my mouse if i will move my mouse anywhere red image. Here are my codes: HTML

15px gap on the X-axis.

$('img#sorc').on('mousemove mouseleave', function(e) {
  if (e.type == 'mouseleave') {
    $('div#test').css('display', 'none');
  } else {
    $('div#test').css({
      'display': 'block',
      'top': e.pageY,
      'left': e.pageX + 15
    });
  }
});

.cclass {
  position: absolute;
  background-color: orange;
  height: 125px;
  width: 175px;
  top: 0px;
  left: 0px;
  display: none;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><imgid="sorc"src="http://placehold.it/350x150" /><divid="test"class="cclass"style="border:solid">
  name:blahblah
  <br />name:blahblah
  <br />name:blahblah
  <br /></div>

Solution 2:

Created a fiddle for you problem

modified your HTML code a bit. added one parent and given position as relative to that parent.

<divstyle="position:relative"><imgid="sorc"src="~/photos/test.jpg" /><divid="test"class="cclass"style="border:solid">name:blahblah
        <br />name:blahblah
        <br />name:blahblah
        <br /></div></div>

Solution 3:

The only thing is your mouse is interfering with your blaah image, add sufficient margin to your cursor position, e.pageY + 10 , e.pageX + 10, or as mentioned in one of the answers make your container relative

Solution 4:

$('img#sorc').on('mousemove mouseleave', function(e) {


  if (e.type == 'mouseleave') {
    $('div#test').css('display', 'none');

  } else {

    $('div#test').css({

      'display': 'block',
      'top': e.pageY,
      'left': e.pageX

    });
  }
});

.container {
  position: relative;
}
.cclass {
  position: absolute;
  background-color: orange;
  height: 125px;
  width: 175px;
  top: 0px;
  left: 0px;
  display: none;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><divclass="container"><imgid="sorc"src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png " /><divid="test"class="cclass"style="border:solid">
    name:blahblah
    <br />name:blahblah
    <br />name:blahblah
    <br /></div></div>

Solution 5:

you can do this one:

$('#sorc').on('mousemove mouseleave',function (e) {


     if (e.type == 'mouseleave'){
     $('div#test').css('display', 'none');

     }                

     else {

     $('div#test').css({

           'display': 'block',
           'top': e.pageY,
           'left': e.pageX

           });
         }
});

here my Fiddle

Share