在悬停时将光标旁边的DIV显示

Question

我已经设置了一个我现在拥有的JSFiddle，基本功能可以工作，但div似乎只是显示它而不是光标。在实际网站上的这个结果显示框中没有显示复选框附近的位置，起初我认为这是位置或z-index的问题，但现在我不这么认为。

好的我已经让这个工作在一个JS小提琴，但由于某种原因，它没有在网站上工作......它在菜单下的“你的事件”＃39;

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

获取当前鼠标位置并使用x-y坐标，如下所示

$("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”

选中fiddle

中的第一个复选框

编辑：抱歉，我添加了代码以再次获取坐标..已更新代码并提示

Answer 3

http://jsfiddle.net/GYXE2/24/检查这个小提琴

dude太多的jquery代码，只是清理了一些代码，这可能会减小文件大小。这就是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）中传递事件，以便它可以在你接下来做的任何事情中使用。否则，e。无论什么是未定义的。

然后，您应该通过console.log（e）查看您可用的e属性。

通过这样做，您将看到（至少在FF中）坐标被标记为clientX和clientY，因此您应该调用e.clientX＆amp; e.clientY坐标分别。

我有updated your 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"         
  });     
});