这个问题在这里已有答案:
我正在尝试使用css显示div悬停,但似乎无法使用伪类元素。
我认为这将与使用类和子代子元素的锚元素的悬停规则有关,但似乎无法找到它的任何引用。
.page-link2 {
display: none;
}
.row > .col-md-3 > a.menu-link2:hover + .page-link2 {
display: block;
}
<div class="container">
<div class="row">
<div class="col-md-3">
<ul>
<li class="menu-link1" ><a href="#">Page1</a></li>
<li class="menu-link2" ><a href="#">Page2</a></li>
</ul>
</div>
<div class="col-md-9">
<div class="page-link2"><p>test text</p></div>
</div>
</div>
</div>
首先,你的孩子组合子(>
)没有按原样到达a.menu-link2
。使用子组合器来定位它的正确方法是
.row > .col-md-3 > ul > a.menu-link2:hover
因为你错过了<ul>
孩子。 (>
选择器针对儿童,而不是孙子)
其次,您正在使用相邻的兄弟选择器(+
)来尝试定位不是相邻兄弟的元素,而是在其他地方定位元素。
您需要将<div class="page-link2">
移动到<li>
中,以便您可以在悬停时选择它,或使用javascript对悬停做出反应并显示元素。