Question

如何创建一个在整个display-div上显示图像的悬停功能？假设我将鼠标悬停在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函数只对点击事件做出反应。我将如何制作它以便对mouseOver做出反应？

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函数有两个处理程序作为参数，第一个处理程序是一个回调函数，当你将鼠标悬停在项目上并执行代码时调用它，第二个是处理程序输出函数，当你取消项目时执行该函数。 / p>

Answer 2

稍微改编一下你的代码，似乎工作正常。告诉我它是不是你想要的。

<tr ng-repeat="customer in studentDetails">   
    <td>
        <div ng-repeat="item in customer.student_branch track by $index">
            <span>{{item.entry_date}}</span>
            <span>{{item.remarks}}</span>
        </div>    
    </td>
</tr>

$(document).ready(function() {

  $(".menu2").hover(function() {
    $('.showClickedContent').html($($(this).attr('href')).html())
  }, function() {
    $('.showClickedContent').html('')
  });

  $(".parent").find('h2').click(function() {
    $(".c").fadeOut();
    $(".c").eq($(this).index()).fadeIn();

  });

});

a {
  margin: 0 0.3em;
  font-family: "arial";
  text-decoration: none;
}

h2 {
  color: black;
}

悬停以更改div内容

2 个答案: