javascript - 悬停以更改 div 内容

Question

我如何创建一个悬停函数来在整个显示分区上显示图像？假设我将鼠标悬停在 item1 上，那么图像将覆盖 display-div，如果我将鼠标悬停在另一个 item 上，display-div 中的图像应更改为该图像。 https://jsfiddle.net/urvmgk8e/1/ (不工作)

Nav-div          Display-div
--------------  -------------
|            | |            |
| >>item1<<  | |content for |   
|   item2    | |   item1    |   
|   item3    | |            |       
|            | |            |
|            | |            |
|            | |            |
--------------  --------------

Jquery:

$("a.menu").click(function(e) {
  $('.ShowClickedContent').html($($(this).attr('href')).html()); //Display-div container
});

问题是，我的 jquery 函数仅对点击事件使用react。我该如何制作它才能对鼠标悬停使用react？

Answer 1

您可以使用 jQuery 的悬停功能或鼠标悬停。我按照我的理解写了一个例子:http://codepen.io/Kalan/pen/wJpYoL

$("#first").hover(function(){
  $("#display img").css("display","block");
  
},function(){
  $("#display img").css("display","");
  none
  
});

#display img
{
  display: none;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
  <span id="first">Hover</span>
</div>
<div id="display">
  <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" />
</div>

.hover 函数有两个处理程序作为参数，第一个处理程序是回调函数，当您将鼠标悬停在项目上并执行代码时调用该函数，第二个处理程序是处理程序输出函数，当您取消悬停项目时执行该函数。