Hover effect on a different element

Question

I have this structure:

HTML

<div class="bottom-container">
    <div class="double-arrow"></div>
    <div class="bottom-box green margin-top">
        <h1 class="bottom-box-h1">Box title 1</h1>
        <p class="bottom-box-text">It is a long established fact that a reader will be distracted by the readable content</p>
    </div>
</div>

The .bottom-box-text isn't displayed on default. It has a display:none property.

I need to display the .bottom-box-text div when I hover over the .double-arrow div. But I cant figure it out.

I have this CSS:

.double-arrow:hover .bottom-box-text {
    display: inline;
}

I tried different selectors (like "+" "~"), but it doesn't work.

Thank you if you can help!

Answer 1

You can use general sibling selector to select .bottom-box first:

.bottom-box-text {
    display: none;
}

.double-arrow:hover ~ .bottom-box .bottom-box-text {
    display: inline;
}

<div class="bottom-container">
  <div class="double-arrow">Arrow</div>
  <div class="bottom-box green margin-top">
    <h1 class="bottom-box-h1">Box title 1</h1>
    <p class="bottom-box-text">It is a long established fact that a reader will be distracted by the readable content</p>
  </div>
</div>

Answer 2

.double-arrow:hover + div > .bottom-box-text { 
  display: inline;
}

Basically, when the double arrow is hovered, the div right after is selected and its children having .bottom-box-text will have the effect applied. If it doesn't, you'll maybe have to use !important as an attribute on display.