How to use links to show DIV on hover CSS?

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>

Your problem is how you're trying to use the + selector. It selects the very next sibling element relative to the preceeding selector - see here for further info https://stackoverflow.com/questions/1139763/what-does-the-plus-sign-css-selector-mean — Scoots, Mar 06 '18 at 13:06

score 0 · Accepted Answer · answered Mar 06 '18 at 13:09

Firstly, your child combinators (>) don't reach the a.menu-link2 as is. A correct way to target it using child combinators would be

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

because you missed the <ul> child. (The >-selector targets children, not grandchildren)

Secondly, you're using an adjacent sibling selector (+) to try and target an element that is not an adjacent sibling, but an element somewhere else.

You either need to move the <div class="page-link2"> into your <li>, so that you can select it on hover, or use javascript to react to the hover and display the element then.

How to use links to show DIV on hover CSS?

1 Answers1