日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
CSS實(shí)現(xiàn)鼠標(biāo)懸停tip效果

你對(duì)CSS實(shí)現(xiàn)鼠標(biāo)懸停tip效果是否了解，這里向大家簡(jiǎn)單介紹一下，鼠標(biāo)懸停tip效果，可以在鼠標(biāo)移上去的時(shí)候有一個(gè)提示信息，我們可以將相關(guān)的信息放置在這個(gè)tip中，不影響頁(yè)面美觀而又能很好的傳達(dá)信息。

創(chuàng)新互聯(lián)公司長(zhǎng)期為超過千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為洮南企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站，洮南網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

鼠標(biāo)懸停tip效果如何用CSS實(shí)現(xiàn)

鼠標(biāo)懸停tip效果，是一個(gè)非常有用的功能，在頁(yè)面布局受到局限的時(shí)候，我們不能往頁(yè)面中添加過多的內(nèi)容。而鼠標(biāo)懸停tip效果，可以在鼠標(biāo)移上去的時(shí)候有一個(gè)提示信息，我們可以將相關(guān)的信息放置在這個(gè)tip中，不影響頁(yè)面美觀而又能很好的傳達(dá)信息。

　　我們用CSS可以實(shí)現(xiàn)這樣的效果，其實(shí)這很簡(jiǎn)單，我們可以新建一個(gè)span或div，將之初始設(shè)置成：display:none，隱藏這一標(biāo)簽的內(nèi)容。

當(dāng)鼠標(biāo)移上去的時(shí)候，我們將此內(nèi)容顯示出來。然后對(duì)其進(jìn)行定位。就達(dá)到了鼠標(biāo)懸停tip效果。

◆鼠標(biāo)懸停tip效果實(shí)例CSS代碼

ExampleSourceCode

 
 
 
    
  
  
  
  1. a#tip{position:relative;left:30px;top:30px;}  
    2.   
  
  
  2. a#tip:link{text-decoration:none;
    3.   
  
  
  3. color:#c00;display:block}  
    4.   
  
  
  4. a#tip:hover{text-decoration:none;  
    5.   
  
  
  5. color:#000;display:block}  
    6.   
  
  
  6. a#tipspan{display:none;}  
    7.   
  
  
  7. a#tip:hover#tip_info{  
    8.   
  
  
  8. display:block;  
    9.   
  
  
  9. border:1pxdashed#c00;  
    10.   
  
  
  10. background:#fff;  
    11.   
  
  
  11. padding:1px;  
    12.   
  
  
  12. position:absolute;  
    13.   
  
  
  13. top:0px;  
    14.   
  
  
  14. left:120px;  
    15.   
  
  
  15. }  
    16.   
  
  
  16.  
    17.

◆鼠標(biāo)懸停tip效果實(shí)例XHTML代碼

ExampleSourceCode

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.   
  
  
  4. alt="www.mb5u.com"width="200"height="90"/> 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.

◆查看鼠標(biāo)懸停tip運(yùn)行效果

SourceCodetoRun

 
 
 
    
  
  
  
  1.   
  
  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    3.   
  
  
  3.  
    4.   
  
  
  4.  
    5.   
  
  
  5.   
  
  
  6. content="text/html;charset=utf-8"/> 
    7.   
  
  
  7. www.mb5u.com 
    8.   
  
  
  8.  
    9.   
  
  
  9. body{font:normal14px宋體}  
    10.   
  
  
  10. a#tip{position:relative;left:30px;top:30px;}  
    11.   
  
  
  11. a#tip:link{text-decoration:none;color:#c00;display:block}  
    12.   
  
  
  12. a#tip:hover{text-decoration:none;color:#000;display:block}  
    13.   
  
  
  13. a#tipspan{display:none;}  
    14.   
  
  
  14. a#tip:hover#tip_info{  
    15.   
  
  
  15. display:block;  
    16.   
  
  
  16. border:1pxdashed#c00;  
    17.   
  
  
  17. background:#fff;  
    18.   
  
  
  18. padding:1px;  
    19.   
  
  
  19. position:absolute;  
    20.   
  
  
  20. top:0px;  
    21.   
  
  
  21. left:120px;  
    22.   
  
  
  22. }  
    23.   
  
  
  23.  
    24.   
  
  
  24.  
    25.   
  
  
  25.  
    26.   
  
  
  26.   
  
  
  27. _fcksavedurl="http://www.mb5u.com"> 
    28.   
  
  
  28.   
  
  
  29. _fcksavedurl="/uploads/divcss/logo3.gif"alt="www.mb5u.com"  
    30.   
  
  
  30. width="200"height="90"/> 
    31.   
  
  
  31.  
    32.   
  
  
  32.  
    33.

[可先修改部分代碼再運(yùn)行查看效果]


當(dāng)前題目：CSS實(shí)現(xiàn)鼠標(biāo)懸停tip效果
轉(zhuǎn)載來源：http://www.dlmjj.cn/article/djijcjj.html