JQuery：單擊鏈接時在鼠標位置顯示隱藏的div

Question

假設我的頁面中有 2 個鏈接，並且我希望在單擊任一鏈接時在頁面上鼠標所在的位置（鼠標 x，y）顯示一個隱藏的 div。 另外，我想傳入一個值來設置 div 的標題（請參閱 divTitle id）。

如何使用 jQuery 完成此操作？

隱藏分區：

<div class="boxFAQ" id="questionMarkId">
  <span id="divTitle"></span>  
  SHOW ME!
</div>

Answer 1

下面的代碼將讓您了解顯示 div。 繼續您的要求，然后相應地隱藏它或根據需要顯示消息

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

jQuery(document).ready(function(){
   $('.alink').click(function(e){
    $('#questionMarkId').hide();
    $('#questionMarkId').css({'top':e.pageY-50,'left':e.pageX, 'position':'absolute', 'border':'1px solid black', 'padding':'5px'});
    $('#questionMarkId').show();
   });
});



</script>
</head>

<body>

<div class="boxFAQ" id="questionMarkId" style="display: none;">
  <span id="divTitle"></span>  
  SHOW ME!
</div>


<br /><br /><br /><br />
<a href="#" class="alink">Link 1</a>
<a href="#" class="alink">Link 2</a>


</body>
</html>

更新
創建一個將在單擊鏈接時調用的函數。 向此函數傳遞您的消息（任意數量的參數）
所以你的鏈接看起來像這樣

<a href="#" class="alink" onclick="showTitle('This is the title')">Link 1</a>
<a href="#" class="alink" onclick="showTitle('This is another title')">Link 2</a>

函數看起來像這樣

function showTitle(message)
{
    $('#questionMarkId').hide();
    $('#questionMarkId').css({'top':e.pageY-50,'left':e.pageX, 'position':'absolute', 'border':'1px solid black', 'padding':'5px'});
    $('#questionMarkId').show();
    $('#divTitle').html(message);
}

更新
帶event參數的函數

function showTitle(message, evt)
{
   var e = e || evt || window.event;
   // ... rest of the code
}

Answer 2

根據您提供的上下文，這是一個幫助：

$('#questionMarkId').hide();

$('a').on('click', function(e) {
    e.preventDefault();
    $('#questionMarkId').css( 'position', 'absolute' );
    $('#questionMarkId').css( 'top', e.pageY );
    $('#questionMarkId').css( 'left', e.pageX );
    $('#questionMarkId').show();
});

和小提琴鏈接： http : //jsfiddle.net/m6XPP/

Answer 3

為了讓 ie 找到鼠標坐標，我必須將以下內容添加到函數中。 我很驚訝沒有更“Jquery”的方法來解決這個問題。 再次感謝你的幫助！

var posx;
var posy;
if (typeof e.pageY === "undefined") 

    {       //will e work here?
    posx = window.event.clientX + document.body.scrollLeft 
    + document.documentElement.scrollLeft; 
    posy = window.event.clientY + document.body.scrollTop 
    + document.documentElement.scrollTop; 

    alert("was undefined!");
    } 
else{ 


    posx = e.pageX; 
    posy = e.pageY; 
    alert("was NOT undefined!");

    }
alert("posy:" + posy);
alert("posX:" + posx);

Answer 4

當我剛剛登陸此頁面時，可能會在將來幫助某人 - 但這是我的解決方案

$(document).ready(function() {
        $('.hider').hide();
        $(document).mousemove(function(event) {
            var x = event.pageX;
            var y = event.pageY;
                //output mouse movements
                //console.log(x + y);
            $('h3').html("X="+x+"Y="+y+"");
        
    
        $(document).on('click',function(event) {
            $('.hider').show();
            $('.hider').css({'background-color' : 'red','width' : '250px','height' : '250px','position' : 'absolute','top': y,'left' : x});
        });
        });
    });

工作代碼筆https://codepen.io/desjardins2019/pen/XWNpmXL

JQuery：單擊鏈接時在鼠標位置顯示隱藏的div

問題描述

4 個解決方案

解決方案1
11 已采納 2013-02-12 05:29:52

解決方案2
9 2013-02-12 05:26:19

解決方案3
2 2013-02-13 21:07:33

解決方案4
0 2021-02-12 19:08:15

JQuery：單擊鏈接時在鼠標位置顯示隱藏的div

問題描述

4 個解決方案

解決方案1 11 已采納 2013-02-12 05:29:52

解決方案2 9 2013-02-12 05:26:19

解決方案3 2 2013-02-13 21:07:33

解決方案4 0 2021-02-12 19:08:15

解決方案1
11 已采納 2013-02-12 05:29:52

解決方案2
9 2013-02-12 05:26:19

解決方案3
2 2013-02-13 21:07:33

解決方案4
0 2021-02-12 19:08:15