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

更改了附加内容，删除了每个mouseover事件中的新图片。利用背景图像缓存图像;每个mouseover未向服务器请求。已将"left": (e.pageX + xOff) + "px"更改为"left": (e.pageX + yOff) + "px"以将图像显示在光标右侧，而不是a元素上。

  $(function() {
// 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 elems = $($.map(image_location, function(src, i) {
  return $("<div />", {
    "class": i,
    "css": {
      "background-image":"url(\""+src+"\")",
      "background-repeat":"no-repeat",
      "background-size":"cover",
      "width":"200px",
      "height":"200px",
      "display":"none",
      "position":"absolute"
    }
  })[0]
}));

$("body").append(elems);

var xOff = -20;
var yOff = 15;

// select the right image for the right link
//the hover effect
$("a")
.on({"mouseover": function(e) {
  var el = elems.filter("." + this.id);
  if (el.is(":hidden")) { el.fadeToggle("fast") };

}, "mouseleave":function() {
  elems.filter("[class="+ this.id + "]").finish().fadeToggle("fast"); 

}, "mousemove": function(e) {
   elems.filter(":visible") 
   .css({"top": (e.pageY - yOff) + "px",
         "left": (e.pageX + yOff) + "px"})
}});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这是我所指的CSS示例。这样可以保留照片的空间（显示时没有任何移动），直到链接悬停时才会显示照片。

HTML：

<div>
    <a href="#">One</a>
    <img src="//placehold.it/200x250" />
</div>
<div>
    <a href="#">Two</a>
    <img src="//placehold.it/200x250" />
</div>
<div>
    <a href="#">Three</a>
    <img src="//placehold.it/200x250" />
</div>
<div>
    <a href="#">Four</a>
    <img src="//placehold.it/200x250" />
</div>

CSS：

a {
    display: block;
}

a + img {
    visibility: hidden;
}

a:hover + img {
    visibility: visible;
}

DEMO： http://jsfiddle.net/hopkins_matt/oed45h5e/

Answer 4

看看这是否有帮助。我必须创建一个新的HTML和CSS模板，但您可以遵循相同的格式。我必须以我自己的方式实现这一点，因为你的问题并没有提供一个小提琴，但它实现了在特定链接的悬停上显示图像的核心目的：

Fiddle

<强>的jQuery

function hoverExampleFunction(){
  var pictureHandler = '#';
  var hoverHandler = $('.child');
  var index = 0;    
  hoverHandler.hover(function(){   
     index = $(this).index();
     $(pictureHandler+index).animate({opacity:1},200);
  },function(){
     $(pictureHandler+index).css('opacity','0');
  });
}

hoverExampleFunction();

<强> HTML

<div id = "cars">
<img id="0" src="http://crispme.com/wp-content/uploads/lamborghini_aventador-1920x1200.jpg"/>
<img id="1" src="http://news.bbcimg.co.uk/media/images/70996000/jpg/_70996728_70996727.jpg"/>
<img id="2" src="http://cdn.wegotthiscovered.com/wp-content/uploads/Project-Cars.jpg"/>
</div>

<div id = "hover-tabs">
<h1 class="child">First Pic</h1>
<h1 class="child">Second Pic</h1>
<h1 class="child">Third Pic</h1>
</div>

<强> CSS

img{
  width:100%;
  height:500px;
  position:absolute;
  padding:0;
  opacity:0;
}

#cars{
  background:black;
  height:500px;
  width:100%;
  padding:0;
}

h1{
  display:inline;
  margin:0 auto;
  padding:0px 30px 0px 30px;
  background:orange;
  cursor:pointer;
}

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

4 个答案:

HTML：

CSS：