CSS過渡：懸停到顯示div

由於我是初學者，所以我非常努力。CSS過渡：懸停到顯示div

你能告訴我在懸停時如何過渡.box的position？

我只能顯示它，但我不能transition的position從bottom到top這是我想做的事情。

.more { 
 
    position: relative; 
 
    height: 100px; 
 
} 
 

 
.box { 
 
    display: none; 
 
    position: absolute; 
 
    background: white; 
 
    border-radius: 4px; 
 
    height: 43px; 
 
    width: 169px; 
 
    top: 50px; 
 
    transition: top 5s; 
 
} 
 

 
.more:hover .box { 
 
    top: 100px; 
 
    display: block; 
 
}

<div class="col-sm-1 more"> 
 
    <a href="#" class="paragraphs " id="xx">More</a> 
 
    <div class="box"> 
 
    <span>Pages</span> 
 
    </div> 
 
</div>

來源

2017-08-08 Ahmed El Saeed

「top」是什麼意思？ –

好吧，我給了位置相對如此使用屬性頂部我認爲應該做的改變位置，但我不知道 –

你可以添加更多的'HTML'，所以我可以看到更多的東西放置在頁面上？ –

嘗試visibility而不是display。可視性對於轉換有點更好。

.more { 
 
    position: relative; 
 
    height: 100px; 
 
} 
 

 
.box { 
 
    position: absolute; 
 
    background: white; 
 
    border-radius: 4px; 
 
    height: 43px; 
 
    width: 169px; 
 
    top: 50px; 
 
    transition: top 5s ease; 
 
    visibility: hidden; 
 
} 
 

 
.more:hover .box { 
 
    top: 100px; 
 
    display: block; 
 
    opacity: 1; 
 
    visibility: visible; 
 
}

<div class="col-sm-1 more"> 
 
    <a href="#" class="paragraphs " id="xx">More</a> 
 
    <div class="box"> 
 
    <span>Pages</span> 
 
    </div> 
 
</div>

來源

2017-08-08 22:40:04 Ross

它的工作，非常感謝你 –

試試這個：如果你願意，你可以很容易地改變幅度在框類，並在過渡:)

.box { 
    position:absolute; 
    top:0; 
    margin-top:400px; 
} 
.more:hover .box { 
    margin-top:0; 
    -moz-transition: all 0.5s ease-in-out; 
     transition: all 0.5s ease-in-out; 
}

來源

2017-08-08 22:46:21

轉變工作方式之間進行插值速度舊的價值，然後是新的價值。你在這裏看到的問題在技術上是舊的價值從未應用在首位。

設置.box到display: none基本上是說「不要渲染它」，並且轉換不能在不存在的東西和另一個值之間轉換。使用visibility而不是display修復了此問題，因爲visibility: hidden僅隱藏該元素，而不是完全刪除它。

.more { 
 
    position: relative; 
 
    height: 100px; 
 
} 
 

 
.box { 
 
    visibility: hidden; 
 
    position: absolute; 
 
    background: white; 
 
    border-radius: 4px; 
 
    height: 43px; 
 
    width: 169px; 
 
    top: 50px; 
 
    transition: top 5s; 
 
} 
 

 
.more:hover .box { 
 
    top: 100px; 
 
    visibility: visible; 
 
}

<div class="col-sm-1 more"> 
 
    <a href="#" class="paragraphs " id="xx">More</a> 
 
    <div class="box"> 
 
    <span>Pages</span> 
 
    </div> 
 
</div>

如果你想過渡到反向工作，那麼你可以添加其他過渡延遲知名度。

來源

2017-08-08 22:47:09

你的解釋是一個頂級thx –

CSS過渡：懸停到顯示div

回答

相關問題