我的意思是，例如，只在初始負(fù)載上應(yīng)用，

(?抬起頭，我會(huì)說(shuō)一分鐘?的基礎(chǔ)知識(shí))

div {display: none;}

會(huì)影響到& ltdiv & gt當(dāng)它最初加載時(shí)；它在默認(rèn)狀態(tài)下選擇它。

如果我加上

span:hover ~ div {dislay: block;}

，當(dāng)我將鼠標(biāo)懸停在它的& ltspan & gt(這是一個(gè)導(dǎo)航下拉菜單，如果你不知道的話)。

當(dāng)我把鼠標(biāo)從它上面移開(kāi)時(shí)，它會(huì)收回(重新應(yīng)用)顯示:無(wú)；風(fēng)格；因?yàn)樵摌邮奖粦?yīng)用到它的默認(rèn)狀態(tài)，現(xiàn)在它正在返回到默認(rèn)狀態(tài)。

但我想讓它淡出(首先使用不透明度)，我不能這樣做，因?yàn)槟悴荒芴砑右粋€(gè)過(guò)渡延遲顯示(例如，過(guò)渡:不透明度0.3s，顯示0.3s；不會(huì)起作用)。動(dòng)畫(huà)屬性參考

所以，很明顯，我使用了visibility屬性，現(xiàn)在我所有的CSS看起來(lái)都像下面這樣。

主代碼

div {
    visibility: hidden;
    opacity: 0;
    transition: opacity .4s 0ms, visibility .4s 0ms;
} /* Leaving display: block; to be added by default */

span:hover ~ div {
    visibility: visible;
    opacity: 1;
    transition: opacity .4s 0ms, visibility 0ms 0ms;
}

/* ===== The styles below are just added for snippet display. ===== */

div {
    width: fit-content;
    margin-top: 3px;
    padding: 5px 7px;
    background: #ddd;
    border: 3px solid gray;
    border-top: none;
    border-radius: 0px 0px 8px 8px;
}

span {
    padding: 3px 5px;
    border: 1px solid;
    border-radius: 8px 8px 0px 0px;
}

span:hover {
    background: #aee;
    cursor: pointer;
}

<span>Hover Over Me</span>
<br>
<div>Hey There.<br>How ya doin'?</div>