国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

CSS 顯示屬性上的轉(zhuǎn)換
P粉958986070
P粉958986070 2023-08-23 12:27:32
0
2
739
<p>我目前正在設(shè)計(jì)一個(gè) CSS「大型下拉」選單 - 基本上是一個(gè)常規(guī)的純 CSS 下拉選單,但包含不同類型的內(nèi)容。 </p> <p>目前,<strong>CSS 3 過渡似乎不適用於“display”屬性</strong>,即您無法從<code>display: none< 進(jìn)行任何類型的過渡/code> 到< code>display: block</code> (或任意組合)。 </code></p><code> <p>當(dāng)有人將滑鼠懸停在頂級(jí)選單項(xiàng)目之一上時(shí),是否有辦法使上例中的第二層選單「淡入」? </p> <p>我知道您可以在 <code>visibility:</code> 屬性上使用轉(zhuǎn)換,但我想不出有效使用它的方法。 </p> <p>我也嘗試過使用高度,但慘敗。 </p> <p>我也知道使用 JavaScript 實(shí)現(xiàn)這一點(diǎn)很簡單,但我想挑戰(zhàn)自己只使用 CSS,而且我認(rèn)為我的能力有點(diǎn)不足。 </p></code>
P粉958986070
P粉958986070

全部回覆(2)
P粉701491897

您需要透過其他方式隱藏該元素才能使其正常運(yùn)作。

我透過將兩個(gè)

絕對(duì)定位並將隱藏的設(shè)定為 opacity: 0 來實(shí)現(xiàn)這一效果。

如果您將 display 屬性從 none 切換為 block,其他元素上的轉(zhuǎn)換將不會(huì)發(fā)生。 強(qiáng)>

要解決此問題,請(qǐng)始終允許元素為 display: block,但透過調(diào)整以下任一方式來隱藏元素:

  1. 高度設(shè)定為0
  2. 不透明度設(shè)定為0。
  3. 將該元素放置在另一個(gè)具有 overflow:hidden 元素的框架之外。

可能還有更多解決方案,但如果將元素切換為 display: none,則無法執(zhí)行轉(zhuǎn)換。例如,您可以嘗試嘗試這樣的事情:

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0;
}
div.active {
    opacity: 1;
    display: block;
}

但這行不通。根據(jù)我的經(jīng)驗(yàn),我發(fā)現(xiàn)這沒有任何作用。

因此,您始終需要保留元素 display: block - 但您可以透過執(zhí)行以下操作來繞過它:

div {
    transition: opacity 1s ease-out;
    opacity: 0;
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}

P粉071743732

您可以連接兩個(gè)或更多過渡,而 visibility 這次會(huì)派上用場。

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}
<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板