jquery - 在悬停代码上显示图像不起作用

Question

我正在尝试创建一种效果，当鼠标悬停在链接上时，会显示特定图像。这是我到目前为止所拥有的。

$(document).ready(function() {
  var mouseIsOver = function(what) {
    return $(what + ":hover");
  }

  // and 
  var image_location = {
    c1: "http://carreviewwebsite.com/wp-content/uploads/2014/10/Concept-Car-Tarantula.jpg",
    c2: "http://blogs-images.forbes.com/steveodland/files/2012/02/maserati-birdcage-concept.jpg",
    c3: "http://www.dieselstation.com/wallpapers/albums/Honda/Concepts-Tokyo-Auto-Show-2011/honda-concepts-tokyo-auto-show-2011-widescreen-08.jpg",
    c4: "http://conceptlux.com/wp-content/gallery/bmw-zx-6-2015-concept/BMW-ZX-6-2015-Concept-100.jpg",
    c5: "http://cdn.designrfix.com/wp-content/uploads/2009/09/design-of-concept-cars-29.jpg"
  };

  var link;
  var pathToImage;
  var xOff = -20;
  var yOff = 15;

  // select the right image for the right link

  if (mouseIsOver('#c1')) {
    link = $("#c1");
    pathToImage = image_location[c1];
  } else if (mouseIsOver("c2")) {
    link = $("#c2");
    pathToImage = paths["c2"];
  } else {
    link = $("#c3");
    pathToImage = paths["c3"];
  }

  //the hover effect

  link.hover(function(e) {
    $("body").append("<p id='hover-img'><img src='" + pathToImage + "'/></p>");
    $("#hover-img")
      .css("position", "absolute")
      .css("top", (e.pageY - yOff) + "px")
      .css("left", (e.pageX + xOff) + "px")
      .fadeIn("fast");
  }, function() {
    $("#hover-img").remove();
  });

  link.mousemove(function(e) {
    $("#hover-img")
      .css("top", (e.pageY - yOff) + "px")
      .css("left", (e.pageX + xOff) + "px");

  });

});

#hover-img img {
  width: 200px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="c1">car 1</a>

<hr />

<a href="#" id="c2">car 2</a>

<hr />

<a href="#" id="c3">car 3</a>

<hr />

<a href="#" id="c4">car 4</a>

<hr />

<a href="#" id="c5">car 5</a>

在代码中，我用第一个函数来检测我将鼠标悬停在哪个链接上。然后我将图像位置存储在一个对象中以供访问

当我测试它时，它有时可以工作，但仅适用于一个链接。谁有更好的主意

Answer 1

问题是您只在页面首次加载时检查鼠标所在的位置。相反，您可以检查文档上的悬停和鼠标移动事件并将它们委托(delegate)给链接。使用这种方法，您甚至不需要等待 DOM 加载。

var image_location = {
    c1: "http://carreviewwebsite.com/wp-content/uploads/2014/10/Concept-Car-Tarantula.jpg",
    c2: "http://blogs-images.forbes.com/steveodland/files/2012/02/maserati-birdcage-concept.jpg",
    c3: "http://www.dieselstation.com/wallpapers/albums/Honda/Concepts-Tokyo-Auto-Show-2011/honda-concepts-tokyo-auto-show-2011-widescreen-08.jpg",
    c4: "http://conceptlux.com/wp-content/gallery/bmw-zx-6-2015-concept/BMW-ZX-6-2015-Concept-100.jpg",
    c5: "http://cdn.designrfix.com/wp-content/uploads/2009/09/design-of-concept-cars-29.jpg"
  };

  var xOff = 15;
  var yOff = -20;

  $(document).on("mouseenter mouseleave", "a", function(e) {
    if (e.type === "mouseenter") {
      var pathToImage = image_location[this.id];
      $("body").append("<p id='hover-img'><img src='" + pathToImage + "'/></p>");
      $("#hover-img").fadeIn("fast");
    } else {
      $("#hover-img").remove();
    }
  }).on("mousemove", "a", function(e) {
    $("#hover-img")
      .css("top", (e.pageY - yOff) + "px")
      .css("left", (e.pageX + xOff) + "px");
  });

#hover-img {
  position: fixed;
  display: none;
}
#hover-img img {
  width: 200px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" id="c1">car 1</a>

<hr />

<a href="#" id="c2">car 2</a>

<hr />

<a href="#" id="c3">car 3</a>

<hr />

<a href="#" id="c4">car 4</a>

<hr />

<a href="#" id="c5">car 5</a>