兄弟元素的子元素的CSS选择器 [英] CSS Selector for Child of Sibling Element

问题描述

如果我有这样的话：

 < div class =parent> 
< a href =＃id =trigger>触发器< / a> 
< / div> 
< div class =sibling> 
< div id =change> Hello< / div> 
< / div> 
  

是否有选择器在#trigger悬停时抓住#change？

像悬停#trigger一样，更改.sibling的#change元素的背景。

我正在寻找纯粹的CSS解决方案没有javascript。

解决方案

总之：不。

b $ b

考虑到HTML的当前结构（以及CSS选择器的当前状态），这是不可能的。也许我们会在CSS4中得到类似的东西，但像这样遍历最好留给Javascript。

你可以重构你的标记，并使用兄弟选择器：

HTML

 < div class =parent> 
< a href =＃id =trigger>触发器< / a> 
< div class =sibling> 
< div id =change> Hello< / div> 
< / div> 
< / div> 
  

CSS
< pre class =lang-css prettyprint-override> #trigger：hover + .sibling #change {
color：red;
}


codepen

If I've got this:

<div class="parent">
    <a href="#" id="trigger">Trigger</a>
</div>
<div class="sibling">
    <div id="change">Hello</div>
</div>

Is there a selector to grab #change when #trigger is hovered upon?

Like upon hover of #trigger, change the background of .sibling's #change element.

I'm looking for a pure CSS solution without javascript.

解决方案

In a word: no.

Given the current structure of your HTML (and the current state of CSS selectors), this is not possible. Perhaps we will get something like this in CSS4, but traversal like this is best left up to Javascript.

You can obviously restructure your markup, and use the sibling selector:

HTML

<div class="parent">
    <a href="#" id="trigger">Trigger</a>
    <div class="sibling">
       <div id="change">Hello</div>
    </div>
</div>

CSS

#trigger:hover + .sibling #change {
  color:red; 
}

codepen

这篇关于兄弟元素的子元素的CSS选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！