更改与悬停链接关联的 div答案

【问题标题】：Change divs associated to links on hover更改与悬停链接关联的 div
【发布时间】：2013-09-20 18:36:11
【问题描述】：

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

我想要实现的示例在此页面上：

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

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

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

知道如何复制这种效果吗？

提前感谢您的帮助！

【问题讨论】：

您好！我找到了这个链接stackoverflow.com/questions/1396159/…，但我不确定如何实现代码，老实说我对 Javascript 不是很熟悉......

标签： javascript hover hyperlink

【解决方案1】：

我会在您悬停的元素上添加一个data-id 属性，并拥有一堆 div，其中包含您希望显示的相应内容的内容。在 div 上，添加您在链接上的 data-id 属性值中输入的匹配 id。默认情况下隐藏除第一个 div 之外的所有 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);
  });
});

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

【讨论】：

嗨@CWitty 我试过你的代码，它非常接近我想要实现的目标，但我仍然有一些问题，例如如何隐藏除第一个 div 之外的所有内容？在我打开页面的那一刻，所有的 div 都是可见的......
您可以为元素添加一个隐藏类并添加一个CSS规则将它们设置为display:none;或使用jQuery您可以做到$('.hidden').hide(0);
非常感谢您的帮助，我已经实现了您的代码并对其进行了更改以满足我的需要...非常感谢！
如果你不介意接受这个作为答案，如果它有效，我将不胜感激。

【解决方案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>

【讨论】：

【解决方案3】：

参考以下链接

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

希望对你有帮助

【讨论】：

嗨@Sid M我一定会尝试jquery选项卡...这可能是我的问题的解决方案感谢您的回答！
我尝试了 jQuery 选项卡，但我需要将鼠标悬停在链接上，而不是点击它们！还是谢谢！
您可以在 jquery 选项卡的示例中获得鼠标悬停选项，请参阅该示例。

【解决方案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>

【讨论】：