HTML 表格和悬停图像和链接答案

【问题标题】：HTML Tables and Hovering Images and linksHTML 表格和悬停图像和链接
【发布时间】：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 菜鸟。

【问题讨论】：

标签： jquery html css html-table hover

【解决方案1】：

使用 Jquery，您可以执行类似的操作

<head>
    <script src="jquery.js"></script>
    <style>
    a{text-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/

【讨论】：

由于某种原因，当我插入它时它不起作用，尽管它合乎逻辑。我仍在试图找出原因。