将鼠标悬停在td上并添加一个类以进行跨度

Question

问题： ：如果我将鼠标悬停在icons（{{1 }}，pencil），则相应的图标应带有圆形边框，如第一个快照所示。

能不能帮我实现这个目标？我希望一切都可以使用JS / jquery动作进行控制。感谢您的帮助

说明：到目前为止我所做的事情和我的代码。

1）以下是我的trash元素，现在将鼠标悬停在CSS类td（粘贴代码下方）之后，应附加到下面的icon-hover类中

span

下面是负责获取圆形边框的CSS代码段

<td class='j-td-edit font-color-meta'><span class="glyphicon glyphicon-pencil"></span></td>

---

2）当我将鼠标悬停在一行上时，该行将突出显示，并附带以下代码和屏幕截图。

/*icon hover style*/
.icon-hover {
    border: 1px solid #bfbfbf;
    padding: 0.4vw;
    border-radius: 0.3vw;
}

=> /*row hover*/ .hover-color{ background-color: #D0CFCF; } 和图像的相应JS操作在

以下

"mouseenter, mouseleave"

Answer 1

使用CSS :hover伪类

.row {
  height: 35px;
  background: #f5f5f5;
}
.row:hover {
  background: #dddddd;
}

.row .glyphicon {
  padding: 5px;
}
.row .glyphicon:hover {
  outline: 1px solid #000000;
}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

<table width="100%">
  <tr class="row">
    <td>Test</td>
    <td class='j-td-edit font-color-meta'><span class="glyphicon glyphicon-pencil"></span></td>
  </tr>
  <tr class="row">
    <td>Test</td>
    <td class='j-td-edit font-color-meta'><span class="glyphicon glyphicon-pencil"></span></td>
  </tr>
  <tr class="row">
    <td>Test</td>
    <td class='j-td-edit font-color-meta'><span class="glyphicon glyphicon-pencil"></span></td>
  </tr>
</table>

Answer 2

在@jeto单词之后...我找到了代码的解决方案。

//below snippet find the nth(which is 4th td in my case and appends the class below.
 $(this).find('td').eq(4).find('span').addClass('icon-hover'));

和

$(this).find('td').eq(4).find('span').removeClass('icon-hover'));