如何为嵌套在具有hover效果的元素中的元素添加hover效果？

Question

我有一个表格，包含7列和可变数量的行。当我将鼠标悬停在表格行上时，播放按钮会出现在第2列。这是通过less实现的：

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

它看起来如下：

你可以看到，悬停的行有一个播放按钮。我想做的是为按钮实现额外的悬停效果。

如果它是一个链接元素，我只需将伪类:hover添加到链接中，就可以得到我想要的效果。但这不是链接，当我点击播放按钮时，数据必须发送到服务器。

我在JSFIDDLE上找到了解决方案，但问题是，在我的情况下，所有图像都是通过CSS添加的，在jffiddle示例中，图像是通过html代码中的input元素添加的。另一个问题是，有2个图像，我想使用单个图像

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

- plywoods

---

td:nth-child(2):hover不起作用？ - Karl Adler

您可以使用preventDefault()方法来防止父元素的hover事件，从而定义子元素的新hover。 - Breen ho

好的，我想要使用精灵图来实现悬停效果。据我所知，我不能为背景图片设置特定位置。这仅适用于background属性。Breen ho，你能提供一个简单的演示吗？ - plywoods

preventDefault方法是jQuery的方法。我在我的项目中根本不使用jQuery，而是使用AngularJS。 - plywoods

这不是jQuery，而是vanillajs：https://developer.mozilla.org/en/docs/Web/API/event.preventDefault - Pinoniq

Answer 1

这可以通过两种方式实现，一种是仅使用CSS，另一种是使用JavaScript（jQuery）辅助。

使用CSS3的:nth-child()选择器：

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

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

这里是fiddle演示链接：http://jsfiddle.net/7F3ge/

或者

使用jQuery为特定的DOM元素添加hover类：

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

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

});

fiddle demo here: http://jsfiddle.net/u527u/3/

- Pennf0lio