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：悬停影响元素的元素指出

回答

相关问题