Question

可能重复：
Change color of sibling elements on hover using 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>

Answer 1

我相信最好的是通过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/

Answer 2

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

Answer 3

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

在悬停其他元素上更改身体背景图像

3 个答案: