javascript - 如何将悬停效果添加到嵌套到悬停元素的元素？

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 代码中的输入元素添加的。另一个问题是有 2 个图像，我想使用 single image

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

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 元素:

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

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

});

fiddle 演示在这里:http://jsfiddle.net/u527u/3/