Question

我有一个链接列表，并且在该列表之外给出了一个div，我想通过悬停在链接上来改变该div的内容，这样对于每个链接我都可以显示一个对应的div信息里面。

我想要实现的一个例子是在这个页面上：

http://www.darley.co.uk/stallions/our-stallions

如您所见，如果您将鼠标悬停在列表中的马名称上，则右侧的div会更改以显示相对于该马的信息。

我已经检查了该页面的代码，但是我看不到任何与此效果相关的Javascript，HTML代码也没有。

关于如何复制这种效果的任何想法？

提前感谢您的帮助！

Answer 1

我会在您悬停的元素上添加data-id属性，并且有一堆div，其中包含您希望显示的相应内容的内容。在div上添加您在链接上的data-id属性值中放入的匹配ID。除默认情况下隐藏第一个div之外的所有内容并执行类似的操作。

$(document).ready(function(){
  $('#sidebar a').hover(function(){
    var $this = $(this);
    var id = $this.data('id');
    $('.genericdivclass').slideUp(250); //Hide the visible divs
    $('#' + id).slideDown(250);
  });
});

请确保将我使用的虚拟属性替换为与您的标记匹配的虚拟属性。

Answer 2

来自http://api.jquery.com/hover/

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hover demo</title>
  <style>
  ul {
    margin-left: 20px;
    color: blue;
  }
  li {
    cursor: default;
  }
  span {
    color: red;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li class="fade">Chips</li>
  <li class="fade">Socks</li>
</ul>

<script>
$( "li" ).hover(
  function() {
    $( this ).append( $( "<span> ***</span>" ) );
  }, function() {
    $( this ).find( "span:last" ).remove();
  }
);

$( "li.fade" ).hover(function() {
  $( this ).fadeOut( 100 );
  $( this ).fadeIn( 500 );
});
</script>

</body>
</html>

Answer 3

请参阅以下链接

http://jqueryui.com/tabs/#mouseover

希望这会有所帮助

Answer 4

<html>
 <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"      type="text/javascript"></script> 
 </head>
 <body>
<style>
   .horse{ display:none; }   
</style>
<script>
      $(function() {
         $(".links").mouseover( function() {
         $(".horse").hide();
         $("#horse_info_"+$(this).attr('id')).show();
     });    
  });
</script>
<div>
   <div style="width: 200px;float:left">    
    <br><a class="links" id="1" href="/">link1</a>  
    <br><a class="links" id="2" href="/">link2</a>  
    <br><a class="links" id="3" href="/">link3</a>  
    <br><a class="links" id="4" href="/">link4</a>  
    <br><a class="links" id="5" href="/">link5</a>  
    <br><a class="links" id="6" href="/">link6</a>  
   </div>

   <div style="width: 200px;float:left">    
    <div class="horse" id="horse_info_1">
       info about horse 1                 
    </div>

    <div class="horse" id="horse_info_2">
       info about horse 2                 
    </div>

    <div class="horse" id="horse_info_3">
       info about horse 3                 
    </div>

    <div class="horse" id="horse_info_4">
       info about horse 4                 
    </div>

    <div class="horse" id="horse_info_5">
       info about horse 5                 
    </div>

    <div class="horse" id="horse_info_6">
       info about horse 6                 
    </div>

   </div>   
</div>

更改与悬停时链接关联的div

4 个答案: