jQuery或CSS - 即使光标在相邻的单元格中,如何使表格行中的链接显示为带下划线？

Question

我有一个3-4列的表,中间的一个是任务名称,也是链接(还有另一个todo app..groan).我试图做到这一点,只要鼠标悬停在表格行的任何部分 - 而不仅仅是链接本身 - 链接将显示下划线.这是一个小细节,但它一直让我烦恼,我现在拒绝让它变得更好.

起初我尝试了jQuery(原谅显而易见的语法错误,但这是jist)

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

将其作为一般元素的样式

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