我有一个表,其中包含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
}
}
它看起来如下:
您可以看到悬停的行具有播放按钮。我正在尝试做的-是为按钮实现额外的(额外)悬停。
如果它是一个链接元素,我可以将伪:hover类添加到链接中,并得到我想要的。但这不是链接,当我单击播放按钮时-数据必须发送到服务器。
我在JSFIDDLE上找到了解决方案,但问题是在我的情况下,所有图像都是通过CSS添加的,在jffiddle示例中,图像是通过html代码中的input元素添加的。另一个问题是有2张图片,我想使用single image
因此,问题是-实现额外悬停的正确方法是什么?
最佳答案
它可以通过两种方式完成,仅使用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/