Большое спасибо, все работает.
Плохо только то, что получается ссылка в ссылке, и если провести курсором между строк правого столбца, то видно, что там еще как бы ссылка без текста. Но думаю это незаметно. Вот примерно как у меня получилось:
| Код |
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>
.groups_main .groupItem { float:right; width:100%;}
.groups_main ul { list-style: none outside none; font-size:13px; float:right; width:250px;}
.groups_main li a { padding:2px 6px; display:block;}
.groups_main li a:hover, .groups_main li a.selected { background-color:#4196FE; color:#fff; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; text-decoration:none;}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function(){
$('#First_cells a').hover(function(){
var _id=this.id;
if(!_id) return;
$('#Second_cells a.selected').not('.'+_id).removeClass('selected');
$('#Second_cells a.'+_id).addClass('selected');
},function(){
$('#Second_cells a.selected').removeClass('selected');
})
})
});//]]>
</script>
</head>
<body>
<table width="700" border="1">
<tr>
<td width="224">
<div id="First_cells"><a id="x3" href="#">Ссылка1</a><a id="x2" href="#"></a></div>
<div id="First_cells"><a id="x22" href="#">Ссылка2</a><a id="x2" href="#"></a></div>
<div id="First_cells"><a id="x1" href="#">Ссылка3</a><a id="x2" href="#"></a></div>
</td>
<td width="367">
<div class="groups_main">
<div class="groupItem last">
<ul>
<li>
<div id="Second_cells"><a class="x1 x22" href="#">бугага1</a><a class="x2" href="#"></a></div></li>
<li><div id="Second_cells"><a class="x1 x3" href="#">бугага2</a><a class="x2" href="#"></a></div></li>
<li><div id="Second_cells"><a class="x1 x22" href="#">бугага3</a><a class="x2" href="#"></a></div></li>
</ul>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
|
|
