如何使用 links to show DIV on hover CSS? [duplicate]

问题描述 投票:0回答:1

这个问题在这里已有答案:

我正在尝试使用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>
html css
1个回答
0
投票

首先,你的孩子组合子(>)没有按原样到达a.menu-link2。使用子组合器来定位它的正确方法是

.row > .col-md-3 > ul > a.menu-link2:hover

因为你错过了<ul>孩子。 (>选择器针对儿童,而不是孙子)

其次,您正在使用相邻的兄弟选择器(+)来尝试定位不是相邻兄弟的元素,而是在其他地方定位元素。

您需要将<div class="page-link2">移动到<li>中,以便您可以在悬停时选择它,或使用javascript对悬停做出反应并显示元素。