HTML表和悬停图像和链接

我有一个客户谁拥有一个HTML表格布局（ick，我知道）在一行图像，然后在下一行相应的文本链接。图像和文字都是分开的超链接，没有下划线的样式（这里没有显示代码）。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新手。

来源

2013-02-04 EdK

你可以这样做：

$('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()。

来源

2013-02-04 18:15:34

感谢大卫！这工作很好。 – EdK

CSS：

.hovered { 
    text-decoration : underline; 
}

的jQuery：

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

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

来源

2013-02-04 18:17:37 AlienWebguy

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

我会做这样（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; 
}

来源

2013-02-04 18:24:07 Mottie

使用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-04 18:34:33

HTML表和悬停图像和链接

回答

相关问题