我怎麼可以使用CSS選擇器來解決這個

我有一個問題，這個代碼我怎麼可以使用CSS選擇器來解決這個

<ul style="position: absolute; z-index: 999999999;"> 
    <li><a href="#" id="home_link">Home</a></li> 
    <li><a href="#" id="hits_link">music</a></li> 
    <li><a href="#" id="cinema_link">cinema</a></li> 
    <li><a href="#" id="shows_link">shows</a></li> 
    <li><a href="#" id="timeout_link">timeout</a></li> 
    <li><a href="#" id="win_link">win</a></li> 
    </ul> 
<div id="logo"></div>

我需要改變任何「一」

在div＃徽標時，懸停的背景位置試過這個CSS選擇器，沒有運氣

ul li a#hits_link:hover + div#logo{background-position:-198px 0px;}

請諮詢

來源

2012-02-01 Mohammad Ereiqat

你不行。沒有選擇器可以產生你想要的CSS行爲。每個CSS選擇器只能用於影響元素及其後代，而不能影響其兄弟或任何其他完全不相關的元素。

您必須爲此使用jQuery/JavaScript。

例子：

$("ul li a").hover(function() { 
    // When hovering, change the background-position of the #logo-element 
    $("#logo").css("background-position", "-198px 0px"); 
},function() { 
    // When mouse moves away, revert the background-position 
    $("#logo").css("background-position", "0px 0px"); 
});

我給你做一個小提琴。小心對待：http://jsfiddle.net/kMfWk/

來源

2012-02-01 07:38:53

OMG， CSS中有「+」。 Google CSS相鄰選擇器。 – Starx 2012-02-01 07:45:30

但我有問題，如果我使用這個代碼，我已經使用這個函數： ' $（「a＃hits_link」）。click（function（）{$（「div＃logo」）。css（「background-position 「，」 - 189px 0「）;）}' 因此，當我將鼠標懸停在另一個上面時，它會回到背景位置」，「0px 0px – 2012-02-01 07:45:45

其實，[閱讀此]（http://www.w3.org/ TR/CSS2/selector.html＃adjacent-selectors） – Starx 2012-02-01 07:46:22

你根本無法做到這一點，因爲#logo不是#hits_link的鄰接兄弟。

我已經創建了一個小提琴here來演示您的鄰居兄弟姐妹是什麼意思。

#logo以任何方式與#hits_link無關，所以AFAIK您需要js片段的幫助才能做到這一點。

使用jQuery ..你可以做一些類似這樣

$("#hits_link").hover(function() { 
    $("#logo").css("background-position", "-198px 0px"); 
},function() { 
    $("#logo").css("background-position", "0px 0px"); 
});

這裏的東西是一個demo到這一點。

更新： 在這種情況下，第二功能恢復的背景位置0 0

只使用這個，如果你想留下來像

$("#hits_link").hover(function() { 
    $("#logo").css("background-position", "-198px 0px"); 
});

檢查demo

來源

2012-02-01 07:37:13 Starx

但我有問題，如果我使用這個代碼，我已經在使用這個函數：$（「a＃hits_link」）。click（function（）{$（「div＃logo」）.css（「background-position」，「 - 189px 0」）;}}' 因此，當我將鼠標懸停在另一個上面時，它會回到背景位置，「0px 0px – 2012-02-01 07:48:33

@MohammadEreiqatm，檢查我的更新 – Starx 2012-02-01 07:58:30

我怎麼可以使用CSS選擇器來解決這個

回答

相關問題