1

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

私はこのようにします（デモ）：

$('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 に答える
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 に答える