.jpg)
在網(wǎng)頁(yè)交互設(shè)計(jì)中，如何在元素懸停時(shí)保持其寬度不變，同時(shí)使內(nèi)容內(nèi)縮并顯示圖標(biāo)，是一個(gè)常見(jiàn)的需求，尤其當(dāng)元素寬度受動(dòng)態(tài)數(shù)據(jù)影響時(shí)，實(shí)現(xiàn)這一效果更為復(fù)雜。本文將探討如何通過(guò)css實(shí)現(xiàn)這種效果，并展示如何在懸停時(shí)使內(nèi)容內(nèi)縮并顯示圖標(biāo)。
問(wèn)題描述
假設(shè)我們有一個(gè)元素，其內(nèi)容由變量data決定，寬度會(huì)隨著data的長(zhǎng)度變化而變化。我們希望在鼠標(biāo)懸停在這個(gè)元素上時(shí)，保持其寬度不變，同時(shí)在元素內(nèi)部顯示一個(gè)圖標(biāo)，并讓原有的文本內(nèi)容向內(nèi)擠壓，生成省略號(hào)，類(lèi)似于3….的效果。
嘗試與挑戰(zhàn)
最初嘗試是通過(guò)JavaScript編寫(xiě)一個(gè)組件，動(dòng)態(tài)設(shè)置和重置元素的寬度。這種方法雖然可行，但我們希望找到一種更簡(jiǎn)潔的純css解決方案。
純CSS解決方案
通過(guò)純CSS，我們可以實(shí)現(xiàn)懸停時(shí)寬度不變，內(nèi)容內(nèi)縮并顯示圖標(biāo)的效果。以下是實(shí)現(xiàn)這種效果的html和CSS代碼：
HTML結(jié)構(gòu)
<div class="fonttext"> ABCabcdsfes<i class="texticon">?</i>DEFGHIGK </div>
CSS樣式
.fonttext { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; border: 2px dashed red; box-sizing: border-box; border-radius: 4px; } .texticon { position: absolute; width: 20px; height: 100%; background-color: #fff; border: 2px dashed red; font-style: normal; right: -21px; border-left: none; cursor: pointer; border-radius: 4px; top: -2px; display: inline-table; } .texticon:hover { background-color: #2d77ed; } .fonttext:hover { overflow: visible; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-color: transparent; } .fonttext:hover .texticon { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-color: transparent; }
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
效果說(shuō)明
- 初始狀態(tài)：元素顯示正常文本內(nèi)容，圖標(biāo)隱藏在元素右側(cè)。
- 懸停狀態(tài)：當(dāng)鼠標(biāo)懸停在元素上時(shí)，元素的overflow屬性變?yōu)関isible，使得圖標(biāo)顯示出來(lái)。同時(shí)，文本內(nèi)容向內(nèi)擠壓，產(chǎn)生省略號(hào)效果。
通過(guò)這種方法，我們可以實(shí)現(xiàn)元素懸停時(shí)寬度不變，內(nèi)容內(nèi)縮并顯示圖標(biāo)的效果。這種純CSS的解決方案不僅簡(jiǎn)潔高效，還避免了使用JavaScript帶來(lái)的性能開(kāi)銷(xiāo)。
.png)
