Question

我刚刚开始使用jQuery，遇到一些麻烦。

有一张缩略图表，我希望当我将鼠标悬停在其中的图片上时，每个单元格都会突出显示。得到那部分工作。但我也希望单元格内的图片没有下划线 - 这是从样式表a:hover{text-decoration:underline}继承的。这就是我被困住的地方，我不认为我正在设置正确的事情。

我需要使用内联样式，所以我的jQuery看起来像：

$('[name*=thumb]').hover(
  function () {
    //as we hover over an item, change it's background, attempt to vaquish pesky underline
    $('#' + $(this).attr('id').replace('thumb', 'thumbcontainer')).css('background-color', '#cccccc'); 
    $('#' + this).css('text-decoration', 'none');  //doesn't work : (
  },
  function () {
    //fix bgs of items we're not hovering on
    $('#' + $(this).attr('id').replace('thumb', 'thumbcontainer')).css('background-color', '#ffffff'); 
  }
);

我的HTML看起来像这样：

<td name="thumbcontainer8" id="thumbcontainer8"><a href="#" name="thumb8" id="thumb8"><img src="..." /></a></td>
<td name="thumbcontainer9" id="thumbcontainer9"><a href="#" name="thumb9" id="thumb9"><img src="..." /></a></td>

Answer 1

样式表中的这条规则不会起作用吗？

a:hover img{text-decoration:none}

Answer 2

怎么样：

  $(this).css('text-decoration', 'none');

jQuery摆脱了：悬停下划线？

2 个答案: