When you hover the mouse, the buttons should appear. But how to make sure that they are always, for example, under the right lower corner of the 1st element? Given the fact that the coordinates go when scrolling. I tried the following mouse coordinates from event : clientX , target.offsetLeft , screenX , pageX .

  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

2 answers 2

UPD. I edited the title of the question and realized that my answer was no good.

Without scrolling, you can:

  1. When you hover the cursor, jQuery adds a button to the block. When leaving the cursor - deletes.
  2. Together with the button, we add a handler for clicking on it. If the selector $('.button-alert') moved outside of the function, it will work until the button is added to the DOM, and nothing happens when you press the button.
  3. So that the position of the button is calculated relative to the edges of its parent , the blocks are given relative positioning, and the buttons - absolute.
  4. "Under the lower right corner" is right: 0; top: 100%; right: 0; top: 100%; . If it is necessary "in the lower right corner", then it is necessary to replace with right: 0; bottom: 0; right: 0; bottom: 0;

But if the block appears scrolling, then this button:

  1. is covered with scrolling
  2. when scrolling it moves along with the rest of the block contents.

https://jsfiddle.net/glebkema/Lo276ban/

 $(document).ready(function () { $( '.content' ).hover( function() { $( this ).append( '<button type="button" class="button-alert">Click</button>' ); $( '.button-alert' ).click(function() { alert( 'This is block ' + $( this ).parent().attr( 'id' )); }); }, function() { $( this ).find( '.button-alert' ).remove(); } ); }); 
 /* heart of the matter */ .button-alert { position: absolute; right: 0%; top: 100%; } .content { position: relative; } #C { overflow: scroll; } /* nice look */ .content { background-color: lightgreen; border: 1px solid green; margin: 0 auto 20px; padding: 0 2px; } #A { height: 20px; width: 100%; } #B { height: 40px; width: 60%; } #C { height: 80px; width: 20%; } 
 <div id="A" class="content">A</div> <div id="B" class="content">B</div> <div id="C" class="content">C <br>C <br>C <br>C <br>C <br>C</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I leave my answer as a minimal working example to the question.

  • Wrap another diva and not suffer. - Athari
  • @Discord Wrapping a block, you have to check it, at least, for inline-block , float and margin-right . Otherwise, you can miss the position of the button and / or change the behavior of the block itself. It turns out troublesome. The Qwertiy solution is simpler and more versatile. - Gleb Kemarsky

It may be so, but you should check (and / or improve) cross-browser compatibility.

 $('.button-alert').click(function() { alert('This is block ' + $(this).data('dest')); }); ~function () { var id; $('.content').hover(function () { var rect = this.getBoundingClientRect(); clearTimeout(id); $('.button-alert').data('dest', this.id).css({left: window.scrollX + rect.right, top: window.scrollY + rect.bottom}).show(); }, function () { id = setTimeout(function () { $('.button-alert').hide(); }, 1000); }); }(); 
 html, body { /* force scrolls */ margin: 1em 0 0 1em; width: 100%; height: 100%; } .button-alert { position: absolute; transform: translate(-100%, 0); } .button-alert:hover { display: block !important; } #C { overflow: scroll; } /* nice look */ .content { background-color: lightgreen; border: 1px solid green; margin: 0 auto 20px; padding: 0 2px; } #A { height: 20px; width: 100%; } #B { height: 40px; width: 60%; } #C { height: 80px; width: 20%; } 
 <div id="A" class="content">A</div> <div id="B" class="content">B</div> <div id="C" class="content">C <br>C <br>C <br>C <br>C <br>C</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" hidden class="button-alert">Click</button>