Question

我有一个客户端，它有一个HTML表格布局（ick，我知道），其中包含一行中的图像，然后是下一行中的相应文本链接。图像和文本都是单独的超链接，样式没有下划线（此处未在代码中显示）。

<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/

Answer 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()。

Answer 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;
}

Answer 4

使用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>

HTML表格和悬停图像和链接

4 个答案: