怎样写网络小说,官场小说排行榜,我欲封天

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

CSS實現(xiàn)鼠標(biāo)懸停tip效果

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

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

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

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

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

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

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

ExampleSourceCode

 
 
 
  
  
  a#tip{position:relative;left:30px;top:30px;}    
  
  a#tip:link{text-decoration:none;  
  
  color:#c00;display:block}    
  
  a#tip:hover{text-decoration:none;    
  
  color:#000;display:block}    
  
  a#tipspan{display:none;}    
  
  a#tip:hover#tip_info{    
  
  display:block;    
  
  border:1pxdashed#c00;    
  
  background:#fff;    
  
  padding:1px;    
  
  position:absolute;    
  
  top:0px;    
  
  left:120px;    
  
  }

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

ExampleSourceCode

 
 
 
  
  
     
  
     
  
    
  
  
alt="www.mb5u.com"width="200"height="90"/>

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

SourceCodetoRun

 
 
 
  
  
    
  
  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
  
     
  
     
  
    
  
  
content="text/html;charset=utf-8"/>   
  
  www.mb5u.com   
  
     
  
  body{font:normal14px宋體}    
  
  a#tip{position:relative;left:30px;top:30px;}    
  
  a#tip:link{text-decoration:none;color:#c00;display:block}    
  
  a#tip:hover{text-decoration:none;color:#000;display:block}    
  
  a#tipspan{display:none;}    
  
  a#tip:hover#tip_info{    
  
  display:block;    
  
  border:1pxdashed#c00;    
  
  background:#fff;    
  
  padding:1px;    
  
  position:absolute;    
  
  top:0px;    
  
  left:120px;    
  
  }    
  
     
  
     
  
     
  
    
  
  
_fcksavedurl="http://www.mb5u.com">   
  
    
  
  
_fcksavedurl="/uploads/divcss/logo3.gif"alt="www.mb5u.com"    
  
  width="200"height="90"/>

[可先修改部分代碼再運行查看效果]

標(biāo)題名稱：CSS實現(xiàn)鼠標(biāo)懸停tip效果
文章鏈接：http://m.fisionsoft.com.cn/article/djijcjj.html

新聞中心

其他資訊