Question

我有多个嵌套的父子元素。现在我正在寻找可能的解决方案，在任何父母的悬停我想要改变只在父母旁边的孩子的颜色。

<div class="parent">The Parent paragraph.
    <div  class="child">This is Child Para
        <div class="parent">The Parent paragraph.
            <div  class="child">This is Child Para
                <div class="parent">The parent paragraph.
                    <div  class="child">This is Child Para
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

正如我在代码中所说，存在嵌套的parent，child关系。现在，如果您将鼠标悬停在第一个parent上，它应该只对其关联的child类生效，而不是对所有子类生效。

CSS是：

div.parent:hover > .child:first-of-type {
    background: red;
}

我甚至尝试过first-of-type，但它无效。

css需要做些什么改变？

Fiddle

Answer 1

您无法使用CSS中的当前代码执行此操作，因为：

EKAlarm

选择所有这些：

div.parent:hover > .child:first-of-type {
    background: red;
}

因为所有这些都在.child div中。另一方面，您可以在<div class="child">This is Child Para <div class="parent">The Parent paragraph. <div class="child">This is Child Para <div class="parent">The parent paragraph. <div class="child">This is Child Para </div> </div> </div> </div> </div>或<p>中包含您想要变为红色的文字，然后选择使用css，就像这样。

<span>

p:hover + div > p {
    background: red;
}

CodePen

Answer 2

不完美。

＆＃13;

for(i in movieTitles){
  genrePage <- IMBD_Movies %>% 
               follow_link(i)
  IMBD_genres[[i]]$genre <- genrePage %>%
                            html_nodes(".subtext .itemprop") %>%
                            html_text()
  IMBD_genres[[i]]$genre <- IMBD_genres[[i]]$genre[which(IMBD_genres[[i]]$genre 
                            %in% genres)]
  }

＆＃13;

div.parent>p:hover+.child:first-of-type>p {
  background: red;
}

＆＃13;

Answer 3

为此，您必须将默认背景传递给子元素。 bydefault所有元素都从父元素继承背景。

＆＃13;

.child {
    background: white;
}
div.parent:hover > .child:first-child {
    background: red;
}

＆＃13;

<div class="parent">The Parent paragraph.
	<div  class="child">This is Child Para
    	<div class="parent">The Parent paragraph.
			<div  class="child">This is Child Para
            	<div class="parent">The parent paragraph.
					<div  class="child">This is Child Para
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div>This is second Para</div>
</div>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

＆＃13;

Answer 4

由于内部父级和子级div是第一个子类的一部分，因此它的颜色会发生变化。一旦尝试下面的代码

<style>
div.parent:hover > .child {
    background: red;
}
.parent {
    background: none;
}
</style>

当你将鼠标悬停在较低的div上时，它会正常工作，但如果你将鼠标悬停在较低的上方，则前一个div将会改变，因为最低的div是所有上部div的一部分。

嵌套的父子悬停问题

4 个答案: