jquery - HTML 表格和悬停图像和链接

Question

我有一个客户，他有一个 HTML 表格布局(我知道)，其中一行有图像，下一行有相应的文本链接。图像和文本都是单独的超链接，样式没有下划线(此处的代码中未显示)。

<table>
<tr>
<td><a href="product1"><img src="productimage1.jpg" /></a></td>
<td><a href="product2"><img src="productimage2.jpg" /></a></td>
<td><a href="product3"><img src="productimage3.jpg" /></a></td>
<td><a href="product4"><img src="productimage4.jpg" /></a></td>
</tr>
<tr>
<td><a href="product1">Product1</a></td>
<td><a href="product2">Product2</a></td>
<td><a href="product3">Product3</a></td>
<td><a href="product4">Product4</a></td>
</tr>
</table>

我知道在CSS中，下划线悬停可以在文本链接上实现。问题是，用户是否可以将鼠标悬停在图像(在表行中)上并使相应的文本链接(在下一个表行中)带有下划线？例如，如果我将鼠标悬停在“productimage3.jpg”上，那么我希望 Product3 链接带有下划线(当悬停关闭时不带下划线)。我想用 jQuery 可以做一些事情，但我是一个 jQuery 菜鸟。

Answer 1

CSS:

.hovered {
    text-decoration : underline;
}

jQuery:

$('a').hover(function(){
    $('a[href="' + $(this).attr('href') + '"]').toggleClass('hovered');
});

演示:http://jsfiddle.net/Gs5Q5/1/