使用CSS可以實(shí)現(xiàn)鏈接懸停出現(xiàn)選項(xiàng)的效果。下面是一段實(shí)現(xiàn)該效果的代碼:
a:hover { position: relative; } a:hover::after { content: ""; display: block; position: absolute; top: 100%; left: 0; width: 100%; background-color: #fff; border: 1px solid #ccc; box-shadow: 0 0 5px rgba(0,0,0,0.3); padding: 5px; } a:hover::before { content: ""; display: block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: transparent transparent #ccc transparent; }
在上面的代碼中,我們使用了CSS的:hover偽類來設(shè)置鏈接懸停時(shí)的樣式。其中,我們將鏈接的position屬性設(shè)置為relative,然后使用::after偽元素來創(chuàng)建一個(gè)彈出框。
彈出框的樣式由各種屬性來控制,包括background-color、border、box-shadow和padding等。我們?cè)?before偽元素中使用border屬性來創(chuàng)建一個(gè)三角形指示器,使得彈出框和鏈接相連。
通過以上代碼,我們可以很方便地實(shí)現(xiàn)鏈接懸停出現(xiàn)選項(xiàng)的效果。