![](/img/trans.png)
[英]I am trying to make the text in a button change color when I hover over in with the mouse using CSS
[英]Change color of a CSS when mouse hover an TD
我正在开发一个有大桌子的网站(18行x 11列)。 为了让谁更容易看到那张桌子,我让它为TR留下了不同的颜色:
.responsive tr:hover {
background-color: red;
}
但我想对专栏做同样的事情。 但是,如果我使用.responsive td:hover {background-color: blue;}
,它只会悬停单个TD,而不是整个列。 至少,每个TD都有类col1
, col2
等。
如何在悬停TD时更改CSS属性。 如果可以,我可以在悬停col1
TD时更改col1
类的background-color
。
任何的想法?
HTML或CSS中没有列的概念。
你必须使用javascript来做到这一点。
这是使用jQuery的解决方案:
var clean = function(){
$('td').removeClass('colHover');
}
$('td').hover(
function() {
clean();
$('td:nth-child('+($(this).index()+1)+')').addClass('colHover');
}, clean
);
现在,主要是为了好玩,如果你想处理colspan,你可以这样做:
var clean = function(){
$('td').removeClass('colHover');
}
$('td').hover(
function() {
clean();
var col = 0;
$(this).prevAll().each(function(){col += parseInt($(this).attr('colspan')||'1')});
$('tr').each(function(){
var c = 0, done = false;
$('td',this).each(function(){
if (c>col && !done) {
$(this).prev().addClass('colHover');
done = true;
}
c += parseInt($(this).attr('colspan')||'1');
});
if (!done) $(this).find('td:last-child').addClass('colHover');
});
}, clean
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.