Question

我正在为大约20-30个项目制作叠加层，当您将鼠标悬停在叠加层上时，以下代码可以正常工作，但是有一种方法可以简化此操作，因此我不必重复此操作代码三十次？

叠加也是不同的，因此对于每个id，例如＃1，也有一个单独的叠加＃1.beastoverlay。

例如，我会＃1到＃30。

 $("#1").hover(
  function () {
    $("#1.beastoverlay").show();
  },
  function () {
    $("#1.beastoverlay").hide();
  }
  );


 $("#2").hover(
  function () {
    $("#2.beastoverlay").show();
  },
  function () {
    $("#2.beastoverlay").hide();
  }
  ); 

  ....

提前致谢

Answer 1

使用同一作业的两个或更多选择器

  var overlay = "#2, #1, #someID ";

  $(overlay).hover(
     function () {
       $(this).next().show();
     },
     function () {
       $(this).next().hide();
     }
  );

Answer 2

您的代码中出现了一些错误。在页面上多次使用id无效。您有多个具有相同ID的div。

以下是一些正确完成此操作的方法：

示例1：DEMO（使用您的代码更新）

使用jQuery，您可以将每个.beast元素和相应的.beastoverlay元素包装在一个公共类中（在我称之为.menu-group的演示中），然后使用toggle方法在悬停时显示和隐藏。使用这种方法你根本不需要一个id（如果你想拥有一个id，只需确保将它放在包装元素上，使其对页面是唯一的）：

$('.menu-group').hover(function(){
    $(this).find('.beastoverlay').toggle();
});

您还需要稍微调整一下css，以便给出绝对定位的＆＃34;覆盖＆＃34;顶部值并将包装器设置为相对位置。

示例2：DEMO

您也可以在css中执行此操作，而无需使用jQuery / Javascript。这同样适用于此，您需要将.beast和.beastoverlay包装在包装器中：

<强> CSS：

.menu-group:hover div.beastoverlay {
   display: block;
}

如果你使用不透明度，高度或其他一些可动画的值，你甚至可以在悬停时做一个漂亮的动画。

Answer 3

尝试使用for循环：

<script type="text/javascript">
$(document).ready(function () {
    for (var i = 1; i < 31; i++) {
        $("#" + i).hover(
            function () {
                $("#" + i + "beastimage").show();
            },
            function () {
                $("#" + i + "beastimage").hide();
            }
        );
    }
});
</script>

JQuery悬停覆盖问题

3 个答案:

示例1：DEMO（使用您的代码更新）

示例2：DEMO