Question

我有一些jsfiddle代码。很简单，当我将鼠标移动到一个div（triggerShowHidePanel）上时，会显示另一个隐藏的div（categoryContainer1）。移开鼠标，categoryContainer1消失。

为了使代码更有用，我打算添加一组这些，我在jsfiddle上创建。问题是它总是显示/隐藏categoryContainer1而不是categoryContainer2 / 3/4等。我错过了一些明显的东西吗？

提前致谢

HTML

<div class="container">

  <div style='float:left; width:50px;' class='triggerShowHidePanel' panelID='1'>first</div>
  <div style='float:left; width:50px;' class='triggerShowHidePanel' panelID='2'>second </div>
  <div style='float:left; width:50px;' class='triggerShowHidePanel' panelID='3'>third </div>
  <div style='float:left; width:50px;' class='triggerShowHidePanel' panelID='4'>forth </div>

  <div class='categoryContainer1' style='float:left; display:none; width:100px;'>
    1st
  </div>    
  <div class='categoryContainer2' style='float:left; display:none; width:100px;'>
    2nd
  </div>
  <div class='categoryContainer3' style='float:left; display:none; width:100px;'>
    3rd
  </div>
  <div class='categoryContainer4' style='float:left; display:none; width:100px;'>
    4th 
  </div>

</div>

脚本

$('.container').bind('mouseover', function() {
    var ele = $(this).find(".triggerShowHidePanel");
    var positionX = ele.position().top + 30;
    var positionY = ele.position().left;
    $('.categoryContainer' + ele.attr('panelID')).show();
    $('.categoryContainer' + ele.attr('panelID')).offset({ 
        top: Math.round(positionX), 
        left: Math.round(positionY)
    });     
}).bind('mouseout', function() {
    var ele = $(this).find(".triggerShowHidePanel");
    $('.categoryContainer' + ele.attr('panelID')).hide();
    $('.categoryContainer' + ele.attr('panelID')).offset({ top: 0, left: 0 });
});

Answer 1

一般问题是您将mouseover事件绑定到元素。在这种情况下，每次将鼠标移到容器上时，您将始终获得使用类“.triggerShowHidePanel”的第一个元素的panelID。您可以将鼠标悬停到“.triggerShowHidePanel”类，这可能会解决您遇到的问题

$('.triggerShowHidePanel').bind('mouseover', function() {
var ele = $(this);
var positionX = ele.position().top + 30;
var positionY = ele.position().left;
$('.categoryContainer' + ele.attr('panelID')).show();
$('.categoryContainer' + ele.attr('panelID')).offset({ 
    top: Math.round(positionX), 
    left: Math.round(positionY)
});     
}).bind('.triggerShowHidePanel', function() {
    var ele = $(this);
    $('.categoryContainer' + ele.attr('panelID')).hide();
    $('.categoryContainer' + ele.attr('panelID')).offset({ top: 0, left: 0 });
});

鼠标悬停时显示隐藏的div

1 个答案: