将鼠标悬停在表格单元格上时更改BODY背景颜色
[英]Change BODY background color when hovering over a table cell
问题描述
So, I'm playing around with an idea I have. 
所以，我在想一个想法。 What I want to accomplish is to have a 6x6 table, and as you hover over a cell, it will change the BODY background color. 我要完成的工作是拥有一个6x6的表格，当您将鼠标悬停在某个单元格上时，它将改变BODY背景色。 I plan on only applying this to select cells in this table. 我计划仅将其应用于选择此表中的单元格。
As of right now, I have it working with a single div. 截至目前，我已将其与单个div一起使用。 After a lot of googling and searching on StackOverflow, I can't for the life of me get it working with a table. 经过大量搜索和在StackOverflow上的搜索之后，我一辈子都无法使它与表一起使用。
CSS: CSS：
body {
height: 100%;
}
#bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
widht: 100%;
height: 100%;
z-index: 1;
background: #EEE;
}
#cell {
position: absolute;
width: 200px;
height: 136px;
top: 50%;
left: 50%;
margin: -68px 0 0 -100px;
background: #333;
z-index: 2;
}
#cell:hover ~ #bg {
background: #ff0000;
}
HTML: HTML：
<div id="cell"></div>
<div id="bg"></div>
JSFiddle (ADDED TO SHOW THE BEHAVIOR I AM TRYING TO PRODUCE): http://jsfiddle.net/yrKRX/169/ JSFiddle（建议显示我要尝试的行为）： http : //jsfiddle.net/yrKRX/169/
I'm open to jQuery, javascript, or pure CSS solutions, whatever would work the easiest. 我对jQuery，JavaScript或纯CSS解决方案持开放态度，无论哪种方法最简单。
Thanks in advance! 提前致谢！ :) :)
4 个解决方案
解决方案1
3 已采纳 2014-02-25 14:41:58
If you want it to change dynamically use jQuery and listen to mouseenter and mouseleave events: 如果要动态更改它，请使用jQuery并监听mouseenter和mouseleave事件：
$('#myTable tr td.someClass').on('mouseenter',function(){
$('body').css( "background-color", "yellow");
})
$('#myTable tr td.someClass').on('mouseleave',function(){
$('body').css( "background-color", "white");
});
Here is fiddle http://jsfiddle.net/Goodluck/yrKRX/172/ 这是小提琴http://jsfiddle.net/Goodluck/yrKRX/172/
解决方案2
3 2014-02-25 14:50:43
Using CSS classes would be more flexible. 使用CSS类将更加灵活。 Also JS can be shorter: JS也可以更短：
$('table').on('mouseenter mouseleave', '.hover', function(e) {
$('body').toggleClass('active', e.type == 'mouseenter');
});
Demo: http://jsfiddle.net/e57gF/ 演示： http ： //jsfiddle.net/e57gF/
解决方案3
2 2014-02-25 14:45:06
A solution using jQuery: 使用jQuery的解决方案：
<body>
<table>
<tr>
<td id="foo">Foo</td>
<td id="bar">Bar</td>
</tr>
<tr>
<td id="baz">Baz</td>
<td id="tux">Tux</td>
</tr>
</table>
</body>
and 和
// Background change on td hover
$('#foo').hover(function(){
$('body').css('background-color', '#FF0000');
},function(){
$('body').css('background-color', '');
});
$('#bar').hover(function(){
$('body').css('background-color', '#00FF00');
},function(){
$('body').css('background-color', '');
});
$('#baz').hover(function(){
$('body').css('background-color', '#0000FF');
},function(){
$('body').css('background-color', '');
});
$('#tux').hover(function(){
$('body').css('background-color', '#000000');
},function(){
$('body').css('background-color', '');
});
Not exactly elegant, but it gets the job done. 不完全优雅，但是可以完成工作。
解决方案4
1 2014-02-25 14:48:18
If you don't want to hardcode your background-color values, then provide the color in your id attribute. 如果您不想对background-color值进行硬编码，请在id属性中提供颜色。 Something like this: Check The Demo 这样的事情： 检查演示
<table>
<tr>
<td id="red">one</td>
<td id="blue">two</td>
<td id="green">three</td>
</tr>
</table>
var $body = $('body');
$('td').mouseover(function(){
var bgColor = $(this).attr("id");
$body.css('backgroundColor', bgColor);
}).mouseleave(function(){
$body.css('backgroundColor', 'white');
});
A Tip: When you see that you are calling the same thing again and again, better store it in a variable like I did it for the body tag. 提示：当看到一次又一次地调用同一件事时，最好将其存储在变量中，就像我为body标签所做的一样。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.