1

可能重复：
使用 CSS 更改悬停时兄弟元素的颜色

基本上我想在#fb或我创建的任何其他div id悬停时更改我的身体背景图像，我在任何地方都找不到解决方案

<body>
<div class="container">
    <div class="sixteen columns">
        <h1 class="remove-bottom" style="margin-top: 40px">Club 77</h1>
        <hr />
    </div>
    <div class="sixteen columns">
        <h3><a href="" id="fb">Facebook</a></h3>
    </div>
    <div class="sixteen columns">
        <h3><a href="">Photos</a></h3>
    </div>
    <div class="sixteen columns">
        <h3><a href="">Contact</a></h3>
    </div>

</div>

4

3 回答 3

2

我相信最好的方法是通过 jQuery：

第一的。预加载背景图片： 

$('<img/>').hide().attr('src', 'images/background.jpg').load(function(){
    $('body').append($(this));
});

第二。图像鼠标悬停：

$('#fb').hover(function() {
    $('body').css('background-image', 'url("images/background.jpg")');
}, function() {
    $('body').css('background', '');
});

这是 JSFiddle 演示：http: //jsfiddle.net/kGgyY/1/

于 2012-11-14T01:34:02.023 回答
1

相信您需要退回到依赖于 javascript 事件侦听器。一种会监听 div 的 onmouseover/onmouseout并根据需要更改标签#fb的类名的方法。<body>从未见过任何其他方式根据子:hover状态更改元素样式。

于 2012-11-14T00:32:49.573 回答
0

为了做到这一点，body元素（它必须是一个div）必须嵌套在#fb中。在悬停时调用嵌套的 div。将嵌套 div 设置为绝对位置和高度/宽度 100%。如果您需要大于 100% 则不能使用 AP，因为它会创建滚动条。在这种情况下，您可以使用高度/宽度 999em 固定的位置。这可能会奏效。您将需要解决一些 z-index 问题。

于 2012-11-14T01:20:29.490 回答