1

我有一个客户，他有一个 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 菜鸟。

4

4 回答 4

3

CSS：

.hovered {
    text-decoration : underline;
}

jQuery：

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

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

于 2013-02-04T18:17:37.053 回答
1

你可以这样做：

$('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 小提琴演示。

但是在相关方面使用类会更容易一些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 小提琴演示。

参考：

于 2013-02-04T18:15:34.197 回答
0

使用 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>
于 2013-02-04T18:34:33.487 回答
0

我会这样做（演示）：

$('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;
}
于 2013-02-04T18:24:07.587 回答