如何将悬停效果添加到嵌套到带有悬停的元素的元素？答案

【问题标题】：How to add the hover effect to an element that is nested to an element with hover?如何将悬停效果添加到嵌套到带有悬停的元素的元素？
【发布时间】：2014-07-25 08:46:33
【问题描述】：

我有一个包含 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 张图片，我想使用 single image

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

【问题讨论】：

td:nth-child(2):hover 不起作用？
您可以对父元素的悬停事件使用 preventDefault() 方法，通过阻止父元素的悬停来为子元素定义新的悬停。
好吧，我想使用精灵来实现效果。据我了解，我无法为背景图像设置特定位置。它仅适用于背景属性。 Breen ho，你能提供一个简单的演示吗？
preventDefault 方法 - 是 jquery 方法。我根本不在我的项目中使用 jquery。我使用 AngularJS
它不是 jQuery，它的 vanillajs：developer.mozilla.org/en/docs/Web/API/event.preventDefault

标签： javascript html css hover

【解决方案1】：

可以通过两种方式完成，纯粹使用 CSS 或借助 javascript (jQuery)。

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

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

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

这里的小提琴演示：http://jsfiddle.net/7F3ge/

或

使用 jQuery 将悬停类添加到特定的 DOM 元素：

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

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

});

这里的小提琴演示：http://jsfiddle.net/u527u/3/

【讨论】：