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選擇器問題：懸停效果另一個元素

回答

相關問題