將鼠標懸停在td上並添加一個類以進行跨度

Question

問題：我想將鼠標懸停在該行上，並再次懸停在該特定行上，如果將鼠標懸停在icons （ pencil ， trash ）上，則相應的圖標應該像第一張快照所示的那樣帶有圓角邊框。

您能幫我實現這個目標嗎？ 我希望一切都可以使用JS / jquery動作進行控制。 感謝您的幫助

說明：到目前為止，我做了什么和我的代碼。

1）下面是我的td元素，現在將鼠標懸停在css類icon-hover （粘貼以下代碼）上時，應該將其附加到下面的span類中

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

下面是負責獲取圓形邊框的CSS代碼段

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

---

2）當我將鼠標懸停在一行上時，該行將突出顯示，並附帶以下代碼和屏幕截圖。

/*row hover*/
.hover-color{
    background-color: #D0CFCF;
}

=> "mouseenter, mouseleave"和圖像的相應JS操作如下

$(document).on('mouseenter', '.row', function () {
    var $this = $(this), row = $this.closest("tr");
    row.addClass("hover-color");
});

$(document).on('mouseleave', '.row', function () {
    var $this = $(this), row = $this.closest("tr");
    row.removeClass("hover-color");
});

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'));