CSS：懸停影響元素的元素指出

我有以下的HTML結構之前：CSS：懸停影響元素的元素指出

<ul class="container"> 
    <li> 
     <a href="#" class="option"></a> 
     <ul class="submenu"> 
      <li><a href="#">Item A</a></li> 
      <li><a href="#">Item B</a></li> 
     </ul> 
    </li> 
</ul>

是否有可能使用CSS，更改「選項」的backgroung位置，當鼠標移動到「子」？

我看到了CSS Referente，我試着用「>」，「+」和「〜」，但它不起作用。我不知道我是否使用不正確或者不可能。

有人可以幫我嗎？

編輯1

這是不正常的CSS：

a.option~ul.submenu:hover { 
    background-position:0 -48px; 
}

據CSS Referente，在我的情況下，「〜」選擇由之前的每一個「UL」元素一個「a」元素，但不適用於我的代碼。

來源

2012-06-01 Marcio Mazzucato

我們可以看到你的CSS嗎？也避免w3schools。那裏有更好的資源。 https://developer.mozilla.org/en/CSS/CSS_Reference – rlemon

它會工作，如果你讓「選項」的孩子的「子菜單」 –

@rlemon：這裏的罪不只是鏈接到W3Schools，但鏈接到W3Schools **和**標記問題[w3c] ... – BoltClock

去接近你與你的HTML結構想要什麼的唯一方式的孩子把一個:hover上li 。喜歡的東西：

.container > li:hover > .option { 
    background-position: 0 0; 
}

見this fiddle不會改變background-position，但color。當懸停在.submenu上時，父母li上也會有一個懸停。

來源

2012-06-01 15:51:56 ScottS

它的工作原理！謝謝！我只刪除了第一個「>」，所以聲明是這樣的：.container li：hover> .option –

我不認爲這是可能使用CSS，因爲。選項是不是子菜單

來源

2012-06-01 15:47:32 Huangism

如果你可以把「選項」的UL後，然後它會工作：

<ul class="container"> 
    <li> 
     <ul class="submenu"> 
      <li><a href="#">Item A</a></li> 
      <li><a href="#">Item B</a></li> 
     </ul> 
     <a href="#" class="option"></a> 
    </li> 
</ul>

而這個CSS：

.submenu:hover + .option { 
    background-position: -20px -20px; 
}

在純英文本上寫着：當鼠標懸停在.submenu ，改變緊接.submenu後面的.option的背景位置。希望有所幫助。

.submenu:hover ~ .option { 
    background-position: -20px -20px; 
}

這是同樣的事情「+」選擇，除了。選項沒有來立即的.submenu後面。例如，「+」不會爲工作以下標記，但「〜」將工作。

<ul class="container"> 
    <li> 
     <ul class="submenu"> 
      <li><a href="#">Item A</a></li> 
      <li><a href="#">Item B</a></li> 
     </ul> 
     <span>Some other element</span> 
     <a href="#" class="option"></a> 
    </li> 
</ul>

來源

2012-06-01 15:55:38

非常明確你的解釋，謝謝。問題是，ai不能把「選項」在「子菜單」之後，我會在HTML/CSS st中做很多更改ructure。也許我會嘗試實施@ScottS建議。 –

CSS：懸停影響元素的元素指出

回答

相關問題