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

Question

我有一个由7列和可变行数组成的表。当我将鼠标悬停在表格行上时，播放按钮会出现在＃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
}
}

它看起来如下：

您可以看到悬停的行有播放按钮。我想要做的是为按钮实现额外的（额外）悬停。

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

我在JSFIDDLE找到了解决方案，但问题是在我的情况下，所有图像都是通过CSS和jffiddle示例添加的，图像是通过html代码中的input元素添加的。另外一个问题是有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; }

这里的小提琴演示：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/