懸停狀態Heirachy問題

我正在研究一個非常簡單的網站，它佔據了視口的大小。懸停狀態Heirachy問題

我已經使用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>

來源

2016-06-09 Aaron Luther

有了這個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}

替代使用更普遍的兄弟選擇~取決於您的要求。

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

The 30 CSS Selectors You Must Memorize

來源

2016-06-09 16:07:27

尼斯鏈接 - 我從來不知道'：只-child' ...瞭解的東西，每天新！ –

謝謝！「+」做到了。 –

這很難，沒有看到更多的代碼，因爲它可能是您的情況不同......

您使用嫡系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>

來源

2016-06-09 16:07:00

懸停狀態Heirachy問題

回答

相關問題