Эффект наведения на другой элемент - PullRequest
Новая
       7

Эффект наведения на другой элемент

0 голосов
/ 16 декабря 2018

У меня есть такая структура:

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>

.Bottom-box-text не отображается по умолчанию.Он имеет свойство display: none.

Мне нужно отобразить div .bottom-box-text при наведении курсора на div .double-arrow.Но я не могу понять.

У меня есть этот CSS: 

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

Я пробовал разные селекторы (например, "+" "~"), но это не работает.

Спасибо, если можете помочь!

Ответы [ 2 ]

0 голосов
/ 16 декабря 2018

Вы можете использовать общий селектор брата, чтобы сначала выбрать .bottom-box: 

.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>
0 голосов
/ 16 декабря 2018 
.double-arrow:hover + div > .bottom-box-text { 
  display: inline;
}

В основном, когда двойная стрелка наведена, выбран div сразу после него, и его дочерние элементы, имеющие .bottom-box-text, будут применять эффект.Если это не так, возможно, вам придется использовать !important в качестве атрибута на display.

...