0

我在一侧有一个链接列表，并在该列表之外给出了一个 div，我想通过将鼠标悬停在链接上来更改该 div 的内容，以便对于每个链接，我可以显示一个包含一些信息的对应 div。

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

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

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

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

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

在此先感谢您的帮助！

4

4 回答 4

0

我会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);
  });
});

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

于 2013-09-16T15:00:13.387 回答
0 
<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>

于 2013-09-16T15:08:59.330 回答
0

参考以下链接

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

希望这可以帮助

于 2013-09-16T15:04:11.710 回答
0

来自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>
于 2013-09-16T15:02:25.833 回答