文章詳情頁

純CSS實(shí)現(xiàn)鼠標(biāo)放上去改變文字內(nèi)容

瀏覽：23日期：2022-06-02 14:06:29

css樣式

復(fù)制代碼代碼如下:
.remind span {display:block;margin-top:-22px;}
.remind a:hover {padding-top:22px;}
.remind a {float:left;overflow:hidden;}
.remind{height:22px;line-height:22px;overflow:hidden;padding-left:10px;}

html代碼

復(fù)制代碼代碼如下:
<div><a href="#"><span>如需修改帳號(hào)，請(qǐng)發(fā)送修改信息及相關(guān)證明至郵箱</span>提示</a></div>

具體實(shí)例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>鼠標(biāo)經(jīng)過變換文字</title><style>#Menu { width:500px; margin:50px auto; border:1px solid #CCC; overflow:hidden;}#Menu ul { margin:0; padding:0; list-style:none;}#Menu li { width:100px; height:22px; line-height:22px; float:left; overflow:hidden; text-align:center;}#Menu a { width:100px; float:left; overflow:hidden;}#Menu span { display:block; margin-top:-22px;}#Menu a:hover { padding-top:22px;}</style></head><body><ul id="Menu"> <li>HOME首頁</li> <li>NEWS新聞</li> <li>ABOUT關(guān)于</li> <li>CONTACT聯(lián)系</li> <li>照片PHOTO</li></ul></body></html>
[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

上一條：li中插入img圖片間有空隙的解決方案下一條：html小技巧之td,div標(biāo)簽里內(nèi)容不換行

相關(guān)文章：

1. 利用CSS制作3D動(dòng)畫2. 利用CSS3新特性創(chuàng)建透明邊框三角3. CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享4. CSS單標(biāo)簽實(shí)現(xiàn)復(fù)雜的棋盤布局5. 解決vue scoped scss 無效的問題6. 詳解CSS不受控制的position fixed7. js+css實(shí)現(xiàn)全屏側(cè)邊欄8. 詳解CSS偽元素的妙用單標(biāo)簽之美9. 簡單明了帶你了解CSS Modules10. css3溢出隱藏的方法

排行榜

					
					PHP與MYSQL數(shù)據(jù)庫連接
ASP新手必備的基礎(chǔ)知識(shí)
詳解PHP laravel中的加密與解密函數(shù)
asp文件用什么軟件編輯
IntelliJ IDEA恢復(fù)刪除文件的方法
CentOS郵箱服務(wù)器搭建系列——SMTP服務(wù)器的構(gòu)建（ Postfix ）
PHP基礎(chǔ)之生成器4——比較生成器和迭代器對(duì)象
利用Java對(duì)PDF文件進(jìn)行電子簽章的實(shí)戰(zhàn)過程
IntelliJ IDEA創(chuàng)建web項(xiàng)目的方法
docker /var/lib/docker/aufs/mnt 目錄清理方法
PHP輸入流php://input的使用分析
				