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

我想要在我的页面的一个元素上产生悬停效果，并且该效果发生在不是悬停元素的子项的图像上。css3选择器问题：悬停效果另一个元素

一些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＃吧我会申请一个灰度效果的图像，但我似乎无法获得选择工作:(此让我伤心的小狗

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

来源

2013-11-14 user1806445

不幸的是与DOM遍历，你不能向上和向后。您设置的选择器需要在DOM – kunalbhat

bugger中拥有#background AFTER #bar，在#container中 - 给我的老朋友jQuery，我去那么:) – user1806445

@kunalbhat：CSS选择器不是“DOM遍历”。您可以使用DOM遍历在任何方向移动。 – BoltClock

-1

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

“的#container” 不能位置：绝对或位置：相对或它会影响你的位置：固定;位置。

来源

2013-11-14 20:58:18 Wayne

您需要更改HTML以使其正常工作 – Wayne

有关为什么此解决方案工作原因被低估的评论将不胜感激。 – Wayne

不幸的是，你不能改变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... 
    } 
);

来源

2013-11-14 20:56:22

的选择作品，在这里看到：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"); 
});

来源

2013-11-14 21:00:38

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

回答

相关问题