Question

所以，我正在玩弄我的想法。我想要完成的是拥有一个6x6的桌子，当你将鼠标悬停在一个单元格上时，它将改变 BODY 背景颜色。我打算只应用它来选择此表中的单元格。

截至目前，我已经使用了一个div。经过大量的谷歌搜索和搜索StackOverflow后，我无法让我的生活得到它与桌子一起工作。

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：

<div id="cell"></div>
<div id="bg"></div>

JSFiddle（我想尝试制作行为）： http://jsfiddle.net/yrKRX/169/

我对jQuery，javascript或纯CSS解决方案持开放态度，无论哪种方法最简单。

提前致谢！：）

Answer 1

如果您希望它动态更改，请使用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");
});

这是小提琴 http://jsfiddle.net/Goodluck/yrKRX/172/

Answer 2

使用CSS类会更灵活。 JS也可以更短：

$('table').on('mouseenter mouseleave', '.hover', function(e) {
    $('body').toggleClass('active', e.type == 'mouseenter');
});

演示：http://jsfiddle.net/e57gF/

Answer 3

使用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>

和

// 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', '');
});

不完全优雅，但它完成了工作。

Updated fiddle.

Answer 4

如果您不想对background-color值进行硬编码，请在id属性中提供颜色。这样的事情：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');
});

提示：当您看到一次又一次地调用相同的内容时，最好将其存储在变量中，就像我为body标记所做的那样。

将鼠标悬停在表格单元格上时更改BODY背景颜色

4 个答案:

演示：http://jsfiddle.net/e57gF/