當我將鼠標懸停在這兩個元素上時,我試圖使<div>它們對齊,但到目前為止還沒有奏效。我嘗試過使用display: inline-block,但它仍然不起作用,如圖所示。代碼中的另一件事是懸停區域是錯誤的。關于如何解決這些問題有什么想法嗎?這是我的代碼:/* Please note that this is updated CSS and not * the original */@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&display=swap');* { font-family: "Montserrat", sans-serif; background-color: #121212; transition: 0.5s; overflow: hidden;}#c { position: absolute; left: calc(4vw + 4vh); top: calc(4vw + 4vh); transition: 0.5s; display: inline-flex; cursor: default; /* V3 of the CSS */ overflow: hidden;}#ct { overflow: hidden; width: 0; top: 0; left: 0; right: 0; transition: 0.5s ease; /* display: inline-block; Removed in Revision 3 */}#c:hover #ct { width: 100%;}#ct span { white-space: nowrap; transition: inherit; display: inline-block; font-size: calc(2vw + 2vh); color: rgb(100, 100, 100); padding-top: 3.5px;}#h { position: relative; display: inline-block; transition: 0.5s; font-size: calc(2vw + 2vh); color: rgb(100, 100, 100); background: rgb(50, 50, 50); padding: 3.5px; border-radius: 5px;}<div id='c'> <div id='ct'> <span>lorem ipsum dolor... </span> </div> <span id='h'>?</span></div><div>更新:使用和修復了對齊錯誤<span>,但懸停錯誤仍然存在。更新2:錯誤已完全修復。謝謝茲德拉夫科·佩爾尼科夫!
1 回答

白板的微信
TA貢獻1883條經驗 獲得超3個贊
使用display: inline-flex
in#c
和 addalign-items: center
可以垂直對齊它們。
對于懸停 - 添加和overflow: hidden
刪除并更改為display: inline-block;
#c
#ct
width: 0%
width: 0
- 1 回答
- 0 關注
- 111 瀏覽
添加回答
舉報
0/150
提交
取消