使DIV顯示在懸停光標旁邊

Question

我已經設置了一個當前可用的JSFiddle，基本功能可以運行，但是div似乎僅顯示了它的位置，而不是通過光標顯示。 實時網站上的結果導致該框未顯示復選框附近的位置，起初我認為這是位置或z-index的問題，但現在我不這么認為。

好的，我已經在JS小提琴中使用了此工具，但是由於某種原因，它在網站上無法使用...位於“您的活動”下的菜單中

http://217.199.187.74/merlineventslondon.com/

任何幫助都會很棒-http: //jsfiddle.net/ThisWebGuy/GYXE2/

JS

// Awards Dinner
$("input[type='checkbox'][value='awards-dinner']").mouseover(function(){         
$(".awardsbox").show();         
$(".awardsbox").css({             
top: (e.pageY + 50) + "px",             
left: (e.pageX + 15) + "px"         
});     
});
$("input[type='checkbox'][value='awards-dinner']").mouseout(function(){        
$(".awardsbox").hide();     
});

// Awards Dinner Dance
$("input[type='checkbox'][value='awards-dinner-dance']").mouseover(function(){         
$(".awardsdinnerdancebox").show();         
$(".awardsdinnerdancebox").css({             
top: (e.pageY + 50) + "px",             
left: (e.pageX + 15) + "px"         
});     
});
$("input[type='checkbox'][value='awards-dinner-dance']").mouseout(function(){        
$(".awardsdinnerdancebox").hide();     
});

// Cocktail Party
$("input[type='checkbox'][value='cocktail-party']").mouseover(function(){         
$(".cocktailbox").show();         
$(".cocktailbox").css({             
top: (e.pageY + 50) + "px",             
left: (e.pageX + 15) + "px"         
});     
});
$("input[type='checkbox'][value='cocktail-party']").mouseout(function(){        
$(".cocktailbox").hide();     
});

// Dinner
$("input[type='checkbox'][value='dinner']").mouseover(function(){         
$(".dinnerbox").show();         
$(".dinnerbox").css({             
top: (e.pageY + 50) + "px",             
left: (e.pageX + 15) + "px"         
});     
});
$("input[type='checkbox'][value='dinner']").mouseout(function(){        
$(".dinnerbox").hide();     
});

// Dinner and Dance
$("input[type='checkbox'][value='dinner-dance']").mouseover(function(){         
$(".dinnerdancebox").show();         
$(".dinnerdancebox").css({             
top: (e.pageY + 50) + "px",             
left: (e.pageX + 15) + "px"         
});     
});
$("input[type='checkbox'][value='dinner-dance']").mouseout(function(){        
$(".dinnerdancebox").hide();     
});

// Networking Event
$("input[type='checkbox'][value='networking-event']").mouseover(function(){         
$(".networkingbox").show();         
$(".networkingbox").css({             
top: (e.pageY + 50) + "px",             
left: (e.pageX + 15) + "px"         
});     
});
$("input[type='checkbox'][value='networking-event']").mouseout(function(){        
$(".networkingbox").hide();     
});

// Party
$("input[type='checkbox'][value='party']").mouseover(function(){         
$(".partybox").show();         
$(".partybox").css({             
top: (e.pageY + 50) + "px",             
left: (e.pageX + 15) + "px"         
});     
});
$("input[type='checkbox'][value='party']").mouseout(function(){        
$(".partybox").hide();     
});

的HTML

<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="awards-dinner">Awards Dinner</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="awards-dinner-dance">Awards Dinner Dance</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="barbat-mitzvah">Bar/Bat Mitzvah</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="cocktail-party">Cocktail Party</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="dinner">Dinner</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="dinner-dance">Dinner Dance</label> <br>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="networking-event">Networking Event</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="party">Party</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="vip-experience">VIP Experience</label>

<div class="awardsbox">
    <p>Perfect for a formal dinner with an awards presentation. AV equipment and a team of technicians are included to ensure your event goes smoothly as well as a three course meal, unlimited wine, beer and soft drinks, staffing and furniture.</p>
</div>

<div class="awardsdinnerdancebox">
<p>Perfect for awards dinner celebrations or charity events. AV equipment and a team of technicians are included to ensure your event goes smoothly as well as  a three course meal, unlimited wine, beer and soft drinks, staffing and furniture. Not to forget a DJ and Disco to ensure your guests dance the night away.</p>
</div>

<div class="dinnerdancebox">
<p>This style of event is more formal and ideal for events where you may need to entertain guests or clients with a formal drinks reception, dinner and a great party afterwards.  A three course meal and unlimited wine, beer and soft drinks are included as well as AV, staffing and furniture.</p>
</div>

<div class="dinnerbox">
<p>This style of event is more formal and ideal for events where you may need to entertain clients without the full party or disco atmosphere. A three course meal and unlimited wine, beer and soft drinks are included as well as AV, staffing and furniture.</p>
</div>

<div class="partybox">
<p>Perfect for both corporate or private celebrations, parties include a DJ & Disco as well as a bowl food menu and unlimited wine, beer and soft drinks. AV, staffing and furniture are also included.</p>
</div>

<div class="networkingbox">
<p>A classic three hour networking event ideal for client parties where talking business is key. Canapés, unlimited wine, beer and soft drinks as well as staffing, AV and furniture are all included in our quotes.</p>
</div>

<div class="cocktailbox">
<p>A cocktail party is a classic three hour networking event ideal for client parties where talking business is key. Canapés, unlimited wine, beer and soft drinks as well as staffing, AV and furniture are all included in our quotes.</p>
</div>

的CSS

.awardsbox, .awardsdinnerdancebox, .dinnerdancebox, .dinnerbox, .partybox, .networkingbox, .cocktailbox{
    display: none;
    padding: 7px;
    background-color: red;
    width: 300px;
    position:absolute;
    z-index: 999;
}

Answer 1

您在函數中缺少“ e”

.mouseover(function(e) ...

.mouseout(function(e){ ...

如果為事件添加參數“ e”，它將起作用

Answer 2

獲取當前鼠標位置並使用xy坐標，如下所示

$("input[type='checkbox'][value='awards-dinner']").mouseover(function(e){      
$(".awardsbox").show();         
$(".awardsbox").css({             
top: (e.pageY + 50) + "px",             
left: (e.pageX + 50) + "px"         
});     
});

在function(e)的參數中將事件獲取為“ e”

選中小提琴中的第一個復選框

編輯：對不起，我添加了代碼以再次獲取坐標..已更新了代碼並撥弄了琴弦

Answer 3

http://jsfiddle.net/GYXE2/24/檢查此小提琴

dude太多的jQuery代碼，只清理了一些代碼，這可能會減小文件的大小。

$(".showPopUp").mouseover(function(e){         
  $("."+this.id).show();         
  $("."+this.id).css({             
    top:  e.pageY,             
    left: e.pageX         
  });     
}).mouseout(function(){        
  $("."+this.id).hide();     
});

Answer 4

這里有兩點需要注意，首先，當將.css作為對象傳遞時，始終將鍵括在引號中。

但是，您需要在代碼中執行的基本操作是，首先在函數aka ..function（e）中傳遞事件，以便隨后執行的任何操作都可以使用該事件。 否則，無論什么都不確定。

然后，您應該通過console.log（e）看一下e的可用屬性。

這樣，您將看到（至少在FF中）坐標被標記為clientX和clientY，因此您應該分別調用e.clientX和e.clientY坐標。

我已經按照您描述的第一個示例更新了jsfiddle ，請看一下並在需要時進行澄清。

$("input[type='checkbox'][value='awards-dinner']").mouseover(function(e){
  console.log(e.clientX);
  $(".awardsbox").show();         
  $(".awardsbox").css({             
    'top': e.clientY + "px",             
    'left': e.clientX + "px"         
  });     
});