css - css3 选择器问题：悬停效果另一个元素

Question

我试图在我的页面的一个元素上产生悬停效果，并且效果发生在不是悬停元素的子元素的图像上。

一些html

<img id="background" src="image.jpg" />
<div id="container">
     <div id="bar"></div>
</div>

<style>
   #background{
       position:fixed;
       top:0;
       left:0;
       width:100%;
       height:100%;
    }
    #bar:hover + #background{
        /* apply some sexy css3 to the background image */
    }

    /* 
          tried #bar:hover ~#background
    */

</style>

所以这个想法是，当你将光标悬停在 div#bar 上时，我会对图像应用灰度效果，但我似乎无法让选择器工作:(这让我成为一只悲伤的小狗

任何帮助表示赞赏并提前感谢您:)

Answer 1

不幸的是，你不能那样改变 DOM。你需要走 jQuery 路线。下面的例子：

$('#bar').hover(
    $('#background').css('fancy-css'); // do something
);

或者，如果您想同时为 and 运行单独的功能mouseenter，mouseleave请执行此操作...

$('#bar').hover(
    function() {
    // do this on mouse enter...
    },
    function() {
    // do this on mouse leave...
    }
);

Answer 2

选择器有效，如下所示：http: //jsfiddle.net/5DFLT/

#id1, #id2 {
    background: red;
    width: 100px;
    height: 100px;
    float: left;
}

#id2 {background: blue;}

#id1:hover + #id2 {background:green;}

但是您的 HTML 结构与此工作所需的内容不对应。

+意思是：紧跟在另一个元素之后的元素。 ~意思是：一个元素跟随，不必紧跟在第一个元素之后，另一个元素。

那么，一个 jQuery 替代方案如下：http: //jsfiddle.net/5DFLT/1/

$("#bar").hover(function () {
    $("#background").css("background-color", "green");
}, function () {
    $("#background").css("background-color", "black");
});

Answer 3

<div id="container">
     <div id="bar"></div>
     <img id="background" src="image.jpg" />
</div>

"#container" 不能是 position:absolute 或 position:relative 否则会影响你的 position:fixed; 位置。