Hover state Heirachy Issues

Question

Я работаю над очень простым веб-сайтом, который занимает размеры до области просмотра.

Я использовал Flexbox для центровки 3 вещей в середине видового экрана. Мое намерение состоит в том, чтобы один блок текста исчезал при наведении курсора, а другой блок отображался одновременно.

В примере кода ниже класс «заголовок» - это то, что должно исчезнуть, и «скрытый заголовок», который изначально скрыт, должен появиться снова.

Я получил это к «почти» работе, применив изменения состояния зависания к контейнеру div, однако, поскольку пара контейнеров внутри использует ширину и высоту 100%, чтобы центрировать в области просмотра, состояния зависания вступают в силу в любое время, когда мышь находится где угодно в окне просмотра.

Я попытался применить состояние зависания к контейнеру заголовка, который не установлен для заполнения окна просмотра, однако я не могу понять, как изменить непрозрачность подзаголовка.

Мое понимание было CSS ниже для зависания, если бы они содержались в одном и том же родительском контейнере, но в этом случае он не работает.

CSS

.headline:hover {opacity:0} 
.headline:hover > .sub-headline {opacity:1} 



<div class="container"> 
<div class="bg-image"></div> 
<div class="headline">Headline Text</div> 
<div class="sub-headline">Sub-Headline Text</div> 
</div> 

Answer 1

С помощью этого HTML

<div class="container"> 
<div class="bg-image"></div> 
<div class="headline">Headline Text</div> 
<div class="sub-headline">Sub-Headline Text</div> 
</div> 

Ваш селектор некорректен, так как вы используете общий селектор потомков >

Это:

.headline:hover {opacity:0} 
.headline:hover > .sub-headline {opacity:1} 

Должно быть это: Используя примыкающий селектор +

.headline:hover {opacity:0} 
.headline:hover + .sub-headline {opacity:1} 

Alternative Используя более общий селектор родственный ~ в зависимости от вашего требования.

.headline:hover {opacity:0} 
.headline:hover ~ .sub-headline {opacity:1} 

The 30 CSS Selectors You Must Memorize

Answer 2

Это трудно, не видя больше кода, как это может быть различным в вашем сценарии ...

Вы используете прямой потомок selctor (>), вы должны быть используя соседний селектор родственный (+)

.headline:hover {opacity:0} 
 
.headline:hover + .sub-headline {opacity:1}

<div class="container"> 
 
    <div class="bg-image"></div> 
 
    <div class="headline">Headline Text</div> 
 
    <div class="sub-headline">Sub-Headline Text</div> 
 
</div>

Альтернативно, оберните подзаголовок в заголовок, и он должен работать, как ожидается, с помощью прямого выбора потомка, как в исходном вопросе (примечание - я использовал visibility свойство вместо opacity для данного примера):

.headline:hover {visibility: hidden;} 
 
.headline:hover > .sub-headline {visibility: visible;}

<div class="container"> 
 
    <div class="bg-image"></div> 
 
    <div class="headline">Headline Text 
 
    <div class="sub-headline">Sub-Headline Text</div> 
 
    </div> 
 
</div>