jQuery或CSS -如何使表格行中的链接带下划线，即使光标位于相邻单元格中？

Question

我有一个由3-4列组成的表格，中间的一个是任务名称，也是链接(还有另一个todo app..groan)。我正在尝试这样做，当鼠标悬停在表行的任何部分-而不仅仅是链接本身-链接将显示下划线。这是一个小细节，但它像地狱一样让我恼火，我现在拒绝让它让我变得更好。

首先，我使用a(请原谅明显的语法错误，但这是jist)尝试了jQuery。

$('#row_in_question').hover( 
function(){ $(this).find(...the link..).toggleClass("highlighted") },
function(){ $(this).find(...the link..).toggleClass("highlighted") }
);

通常将其作为a元素的样式

.highlighted {
text-decoration: underlined;
}

而且它确实切换了该链接上突出显示的类--但是css继承阻碍了它的实现，并且没有任何视觉上的改变。由于我之前的样式，该链接没有下划线时，没有悬停它将不会改变样式。

那么我该怎么做呢？我不想让整行变得可点击，我只想让文本变得带下划线。

Answer 1

更改css怎么样？

$('#row_in_question').hover( 
    function(){ $(this).find(...the link..).css({'textDecoration': 'underline'}) },
    function(){ $(this).find(...the link..).css({'textDecoration': 'none'}) }
);

Answer 2

对于纯CSS解决方案：

CSS

td a {text-decoration: none;}
td {padding:10px 5px 0 5px;}
tr:hover a {text-decoration:underline}

HTML

<table>
     <tbody>
    <tr>
        <td>aaa</td>
        <td><a href="#">bbb</a></td>
        <td>ddd</td>
     </tr>
    <tr>
        <td>aaa</td>
        <td>bbb</td>
        <td><a href="#">ddd</a></td>
     </tr>
  </tbody>
 </table>

Answer 3

你也可以随心所欲:悬停在TR上为你做这件事，尽管如果你已经在使用Jquery，最好还是坚持rahuls的想法。

http://www.xs4all.nl/~peterned/csshover.html