Question

I'm trying to show div on hover using css but can't seem to work with the pseudo-class elements.

I think that this would have to do with the hover rule to the anchor elements with class and descendant child but can't seem to find any reference for it.

.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

首先，您的儿童组合子（BindingsGremlinPlugin）不能按原样到达>。使用子组合器来定位它的正确方法是

a.menu-link2

因为你错过了.row > .col-md-3 > ul > a.menu-link2:hover孩子。（<ul> - 选择器针对的是儿童，而不是孙子女孩）

其次，您正在使用相邻的兄弟选择器（>）尝试定位一个不是相邻兄弟的元素，而是另一个元素。

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

如何使用<a> links to show DIV on hover CSS?

1 个答案: