Javascript 如何将悬停效果添加到嵌套到具有悬停的元素的元素中？

我有一个由7列和可变行数组成的表。当我将鼠标悬停在表格行上时，play按钮出现在第2列中。这是在以下方面的帮助下实现的：

.table-hover > tbody > tr {
    border-left:4px;
    border-left-color:transparent;
    border-left-style:solid;
    &:hover {;
    border-left-color:@active-element-color;
    >thtdbackground-color:#f5f5f5
}

>td:nth-child(2) {
    background-image:url(images/play_icon.png);
    background-position:center;
    background-repeat:no-repeat
}
}

如下所示：

您可以看到悬停的行具有“播放”按钮。我想做的是实现按钮的附加（额外）悬停

如果它是一个link元素，我可以只向链接中添加pseudo:hover类，然后得到我想要的。但这不是链接，当我单击播放按钮时，数据必须发送到服务器

我在这里找到了解决方案，但问题是，在我的例子中，所有图像都是通过CSS添加的，在Jffidle示例中，图像是通过html代码中的输入元素添加的。另外一个问题是，有两个图像，我想使用

---

所以问题是——实现额外悬停的正确方法是什么？

可以通过两种方式实现，一种是纯粹使用CSS，另一种是借助javascript（jQuery）

使用CSS3:n-child（）选择器：

#yourTable td { background: #ccc; height: 2em; width: 8em; }

#yourTable tr:hover td:nth-child(2) { background: red; }

$('document').ready(function(){

    $('#yourTable tr').hover(function() {
        $(this).children('td:eq(1)').toggleClass('hover');
    });

});

小提琴演示：

或

使用jQuery向特定DOM元素添加悬停类：

#yourTable td { background: #ccc; height: 2em; width: 8em; }

#yourTable tr:hover td:nth-child(2) { background: red; }

$('document').ready(function(){

    $('#yourTable tr').hover(function() {
        $(this).children('td:eq(1)').toggleClass('hover');
    });

});

---

fiddle demo here:

td:n子元素（2）：悬停不起作用？您可以对父元素的悬停事件使用preventDefault（）方法，通过阻止父元素的悬停来为子元素定义新的悬停。好吧，我想为hower effect使用精灵。据我所知，我不能为背景图像设置一个特定的位置。它仅适用于背景属性。Breen ho，你能提供一个简单的演示吗？默认方法是jquery方法。我根本不在我的项目中使用jquery。我使用AngularJSit不是jQuery，而是vanillajs：