Question

我对使用伪类:hover感到困惑。

在以下HTML中，:hover按预期运行ul元素，但不适用于div元素：

<!DOCTYPE html>
<html>
<head>
<meta charset:"utf-8" />
<style>

#div1:hover #div2 { 
  color: green;
}

#ul2 {
  display: none;
}

#ul1:hover #ul {
  display:block;
}    

</style>
</head>

<body>
<div id='div1'>
If I hover this, then the next div should change color to green...
</div>

<div id='div2'>
But it doesn't change colors!
</div>

<ul id='ul1'>
<li>If I hover this, then ul2 shows up</li>
<ul id='ul2'>
<li>We're showing up!</li>
<li>We're showing up!</li>
</ul>
<li>etc.</li>
</ul>

</body>
</html>

如果我将此行#div2更改为#div1:hover #div2 {，则

#div1:hover + #div2 {才会变为绿色（请注意加号＆＃34; +＆＃34;）。我不明白，为什么＆＃34; +＆＃34;需要？在此question中，代码甚至使用nav ul li:hover > ul。什么是>？

总结我的问题：在CSS中使用:hover更改另一个元素的syle是什么规则？

Answer 1

我不明白，为什么需要“+”？

+代表相邻的兄弟选择器，当一个元素是一个直接的兄弟元素时使用它，与子元素相反

在此处阅读更多内容：https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

什么是＆gt;为？

>代表子选择器，仅定位直接孩子

在此处阅读更多内容：https://developer.mozilla.org/en/docs/Web/CSS/Child_selectors

作为旁注，将ul（在本例中为<ul id='ul2'>）作为另一个ul的直接子项无效，内部应该是包裹在li

中

Answer 2

你的＃div2必须是＃div1的孩子，如果你想让它像那样工作

Answer 3

你想做什么？如果想要使用相同的悬停形式，那么也许就像这样。

build --cxxopt='-std=c++11'

CSS3：如何正确使用：悬停修改其他元素＆＃39;风格？

3 个答案: