Question

我必须创建一个'X'，它会弹出右上角的鼠标。我需要在页面上发生多个div。我已经能够使用以下非常简单的JQuery在一个div上实现这一点：

$(document).ready(function () {
    $(".imagetrigger").mouseover(function() {
        $(".xdiv").fadeIn();
    })

    $(".xdiv").mouseover(function() {
        $(".xdiv").show();
    })

    $(".imagetrigger").mouseout(function() {
        $(".xdiv").fadeOut();
    })
});

但是，我不想一遍又一遍地为页面上的所有div写出来。 xdiv还必须移动位置才能与其他div一起正确定位，我正在考虑通过使用.addclass向xdiv添加新类以及更新的边距来实现此目的定位。

感谢您提供的任何帮助或指导。

经过一番进一步调查后，我得以开始工作。我的JQuery现在如下所示：

$(document).ready(function () {
  $(".preview").hover(
      function () {
        $(".xdiv",this).show();
      },
      function () {
        $(".xdiv",this).hide();
      }
  );

});

我仍然不确定为什么使用.children选择器不起作用我会调查，但上面的工作对我来说。谢谢你们的帮助。在6-8小时的冷却期结束后，我将把这个作为答案。

Answer 1

这是我认为你需要的一个例子。

它的作用（在鼠标悬停时）显示右上角的十字架并将其隐藏在鼠标左键上。然后，您可以在角落的十字架上使用点击功能来执行某些操作。

HTML

<div id="box1" class="clickable">
  <div class="cross"></div>

  YOUR CONTENT
</div>

CSS

div.clickable
  {
    width:200px;
    height:200px;
    overflow:hidden;
    position:relative;
  }
div.cross
  {
    position:absolute;
    top:0px;
    right:0px;
    width:20px;
    height:20px;
    background-image:YOUR CROSS IMAGE
    display:none;
  }

Javascript（使用jQuery库）

$(".clickable").hover(
  function () {
    $(this).children(".cross").show();
  },
  function () {
    $(this).children(".cross").hide();
  }
);

Answer 2

显示和隐藏“xdiv”时，请不要使用绝对选择器，而应使用html使用.next() .find()，.children()等。

f.ex; （假设有些HTML ...）

<div class="imagetrigger">
<span class="xdiv"></span>
</div>

$(".imagetrigger").mouseover(function() {
    $(this).children(".xdiv").fadeIn();
})

这样你只会显示你想要的xdiv

Answer 3

排序。我的JQuery现在如下所示：

$(document).ready(function () {
  $(".preview").hover(
  function () {
    $(this).append('<div class="xdiv"></div>');

    },
  function () {
    $(".xdiv",this).remove();
  }
  );

});

正如你所看到的，我现在正在追加并删除交叉div，而不是显示和隐藏它，因为我需要在页面上的很多元素上发生这种效果，这使我不必复制和粘贴在div为'x'二十次左右。

弹出多个鼠标悬停

3 个答案: