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
);

或者如果您想为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”不能是位置：绝对或位置：相对或它会影响你的位置：固定;位置。

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

3 个答案: