【问题标题】:Jquery hover() not triggering on hoverJquery hover() 未在悬停时触发
【发布时间】:2014-10-27 12:13:56
【问题描述】:

我有一个奇怪的问题。我正在尝试使用 jquery 悬停。但我无法让它正常工作。我可以让我工作的唯一方法是点击它。有没有人可以看到问题可能存在? HTML 部分:

<a class="preview"><img id="EquipmentInfoPanelElementUrl" height="100" width="100" src="temp.png" alt="gallery thumbnail" /></a>

javascript部分:

  $("a.preview").hover(function (e) {
            $("body").append("<p id='preview'><img src='" + $("#EquipmentInfoPanelElementUrl").attr("src") + "' alt='Image preview' /></p>");
            $("#preview").css("top", (e.pageY - 10) + "px").css("left", (e.pageX + 30) + "px").fadeIn("fast");
        },
     function () {
         $("#preview").remove();
     });

        $("a.preview").mousemove(function (e) {
            $("#preview").css("top", (e.pageY - 10) + "px").css("left", (e.pageX + 30) + "px");
        });

【问题讨论】:

  • 您的 JavaScript 是否在页面底部和/或 document.ready 事件处理程序中执行?
  • 也是javascript创建的预览吗?
  • 文档已准备就绪。
  • 看起来不错:jsfiddle.net/pgq7ncx7
  • 我不认为你的鼠标移动是必要的......应该能够通过悬停来做到这一点并且没问题。除非我错了,否则我没有看到您的 mousemove 实际上做任何重要的事情... >.>

标签: javascript jquery html jquery-hover


【解决方案1】:

它正在工作。 (最新的 jQuery 库)

<!DOCTYPE html>
<html lang="en">

<head>
  <title>jQuery Autocomplete</title>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {

      $("a.preview").hover(function(e) {
          $("body").append("<p id='preview'><img src='" + $("#EquipmentInfoPanelElementUrl").attr("src") + "' alt='Image preview' /></p>");
          $("#preview").css("top", (e.pageY - 10) + "px").css("left", (e.pageX + 30) + "px").fadeIn("fast");
        },
        function() {
          $("#preview").remove();
        });

      $("a.preview").mousemove(function(e) {
        $("#preview").css("top", (e.pageY - 10) + "px").css("left", (e.pageX + 30) + "px");
      });

    });
  </script>
</head>

<body>
  <a class="preview"><img id="EquipmentInfoPanelElementUrl" height="100" width="100" src="http://placehold.it/100x100" alt="gallery thumbnail" /></a>
</body>

</html>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-07-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多