Jquery hover() not triggering on hover

Question

I have an weird problem. I'm trying to use jquery hover. But i can't get it to work correctly. The only way i can get i to work is by clicking on it. Are there any who can see there the issue might be? The HTML Part:

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

The javascript part:

  $("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");
        });

Is your JavaScript executed at the bottom of the page and/or in a document.ready event handler? — pwdst
– pwdst, Commented Oct 27, 2014 at 12:18
I don't think your mousemove is necessary... should be able to do it with just hover and be fine. I don't see your mousemove actually doing anything important, unless I'm wrong... >.> — Cayce K
– Cayce K, Commented Oct 27, 2014 at 12:20

Goran Stoyanov · Accepted Answer · 2020-01-02 09:47:46Z

It's working. (Latest jQuery library)

<!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>

Collectives™ on Stack Overflow

Jquery hover() not triggering on hover

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related