片側にリンクのリストがあり、そのリストの外側に div がある場合、リンクにカーソルを合わせてその div の内容を変更し、リンクごとに対応する div を表示して内部に情報を表示できるようにします。
私が達成したいことの例は、このページにあります：
http://www.darley.co.uk/stallions/our-stallions
ご覧のとおり、リストの馬の名前にカーソルを合わせると、右側の div が変わり、その馬に関連する情報が表示されます。
そのページのコードを確認しましたが、このエフェクトに関連付けられた Javascript は見当たりませんし、HTML コードにも何もありません。
その効果を再現する方法について何か考えはありますか?
よろしくお願いします。
<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>
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>