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

Question

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

• Is there a CSS parent selector? 27回答

我正在尝试使用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>

Answer 1

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

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

因为你错过了<ul>孩子。 （>选择器针对儿童，而不是孙子）

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

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