Question

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

2014-02-25

1422

javascript jquery html css

所以，我正在尝试一个想法。我想要实现的是拥有一个 6x6 的表格，当您将鼠标悬停在单元格上时，它将改变 BODY 背景颜色。我计划仅将此应用于此表格中的选定单元格。

截至目前，我已将其与单个 div 配合使用。在 Google 和 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");
});

这是 fiddle 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', '');
});

虽然不怎么优雅，但是可以完成工作。

更新了 fiddle。