Javascript 更改悬停时与链接关联的div_Javascript_Hover_Hyperlink

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

javascript hyperlink

Javascript 更改悬停时与链接关联的div,javascript,hover,hyperlink,Javascript,Hover,Hyperlink,我在一边有一个链接列表，如果列表外有一个div，我想通过将鼠标悬停在链接上来更改该div的内容，这样，对于每个链接，我都可以显示一个包含一些信息的对应div 我想实现的一个例子在本页上：如您所见，如果您将鼠标悬停在列表中的马名上，右侧的div将更改为显示与该马相关的信息我已经检查了该页面的代码，但我看不到任何与此效果相关的Javascript，HTML代码中也没有任何内容你知道我如何复制这种效果吗提前感谢您的帮助我会在您悬停的元素上添加一个数据id属性，并有一堆div，其中包含您希望

我在一边有一个链接列表，如果列表外有一个div，我想通过将鼠标悬停在链接上来更改该div的内容，这样，对于每个链接，我都可以显示一个包含一些信息的对应div

我想实现的一个例子在本页上：

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

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

你知道我如何复制这种效果吗

提前感谢您的帮助

我会在您悬停的元素上添加一个

数据id

属性，并有一堆div，其中包含您希望显示的相应内容的内容。在div上添加匹配的id，该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);
  });
});

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

From


悬停演示
保险商实验室{
左边距：20px；
颜色：蓝色；
}
李{
游标：默认值；
}
跨度{
颜色：红色；
}

牛奶
面包
芯片
袜子

$（“li”）。悬停(
函数（）{
$（此）。追加（$（“***”）；
}，函数（）{
$（this.find（“span:last”）.remove（）；
}
);
$（“li.fade”）.hover（函数（）{
美元（本）。淡出（100）；
美元。法代因（500）；
});

请参阅以下链接

希望这有帮助


<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>

.horse{显示：无；}
$（函数（）{
$（“.links”）.mouseover（函数（）{
$（“.horse”）.hide（）；
$（“#horse_info”+$（this.attr（'id'））.show（）；
});    
});












关于马1的信息
关于马2的信息
关于马的信息3
关于马的信息4
关于马的信息5
关于马的信息6

你好！我找到了这个链接，但我不确定如何实现代码，老实说，我对Javascript不是很熟悉……嗨@CWitty，我尝试了你的代码，它非常接近我想要实现的目标，但我仍然有一些问题，例如，我如何隐藏除第一个div之外的所有内容？当我打开页面时，所有的div都是可见的……你可以添加一个隐藏的元素类，并添加一个CSS规则，将它们设置为

display:none

或使用jQuery可以执行

$（'.hidden'）.hide（0）非常感谢您的帮助，我已经实现了您的代码并对其进行了更改以满足我的需要。。。我真的很感激！如果你不介意接受这个答案的话，我会很感激的。嗨@Sid M我一定会试试jquery标签。。。这可能是我问题的解决办法谢谢你的回答！我尝试了jQuery选项卡，但我需要将鼠标悬停在链接上，而不是单击它们！无论如何谢谢你！您可以在jquery选项卡的示例中获得鼠标悬停选项，请参见该示例。
<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>