HTML 表格和悬停图像和链接
Posted
技术标签:
【中文标题】HTML 表格和悬停图像和链接【英文标题】：HTML Tables and Hovering Images and links 【发布时间】：2013-01-19 12:17:11 【问题描述】：我有一个客户，他有一个 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 菜鸟。
【问题讨论】：
【参考方案1】：使用 Jquery，您可以执行类似的操作
<head>
<script src="jquery.js"></script>
<style>
atext-decoration: none
</style>
</head>
<body>
<table>
<tr>
<td class="image"><a href="product1"><img src="http://placehold.it/50x50" /></a></td>
<td class="image"><a href="product2"><img src="http://placehold.it/50x50" /></a></td>
<td class="image"><a href="product3"><img src="http://placehold.it/50x50" /></a></td>
<td class="image"><a href="product4"><img src="http://placehold.it/50x50" /></a></td>
</tr>
<tr>
<td class="title"><a href="product1">Product1</a></td>
<td class="title"><a href="product2">Product2</a></td>
<td class="title"><a href="product3">Product3</a></td>
<td class="title"><a href="product4">Product4</a></td>
</tr>
</table>
<script>
$(function()
var items = $('.image');
var titles = $(".title");
var index;
var title;
$(".image").on("mouseover", function()
index = items.index(this);
title = titles[index];
$(title).css("text-decoration", "underline");
);
$(".image").on("mouseout", function()
$(titles).css("text-decoration", "none");
);
);
</script>
</body>
【讨论】：
【参考方案2】：你可以这样做：
$('img').closest('td').hover(function()
$(this).closest('tr').next()
.find('td').eq(this.cellIndex)
.find('a').css('text-decoration','underline');
,function()
$(this).closest('tr').next()
.find('td').eq(this.cellIndex)
.find('a').css('text-decoration','none');
);
JS Fiddle demo.
但是在相关的td 上使用类会更容易一些：
$('img').closest('td').hover(function()
$(this).closest('tr').next()
.find('td').eq(this.cellIndex)
.addClass('underlines');
,function()
$(this).closest('tr').next()
.find('td').eq(this.cellIndex)
.removeClass('underlines');
);
JS Fiddle demo.
参考资料：
jQuery，来自jQuery API。addClass()。
closest()。
css()。
eq()。
find()。
next()。
removeClass()。
【讨论】：
【参考方案3】：我会这样做 (demo)：
$('img').on('mouseover mouseleave', function(e)
// figure out which table cell we're in
var column = $(this).closest('td').index();
// find tr, then jump to the next row
$(this).closest('tr').next()
// now find the correct column, then the link inside
.find('td').eq(column).find('a')
// add/remove hover class depending on the event
.toggleClass('hover', e.type === 'mouseover');
);
使用这个 css：
a:hover, a.hover
text-decoration: underline;
【讨论】：
【参考方案4】：CSS：
.hovered
text-decoration : underline;
jQuery:
$('a').hover(function()
$('a[href="' + $(this).attr('href') + '"]').toggleClass('hovered');
);
演示：http://jsfiddle.net/Gs5Q5/1/
【讨论】：
由于某种原因，当我插入它时它不起作用，尽管它合乎逻辑。我仍在试图找出原因。以上是关于HTML 表格和悬停图像和链接的主要内容，如果未能解决你的问题，请参考以下文章