DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> WEB前端代碼 >> 純css冒泡式提示信息框特效
純css冒泡式提示信息框特效
編輯:WEB前端代碼     
體驗效果:
  • 本網站的名稱: 本網站的網址: 本站提供jQuery特效,Javascript實例,ASP.NET源碼等內容資料,歡迎訪問!
  • 光標停留 這是提醒內容。。。
  • Bill Gates 640K ought to be enough for anybody.
  • Sam Ewing Computers are like bikinis. They save people a lot of guesswork.

適用浏覽器:FireFox、Chrome、Safari、Opera、傲游、搜狗、IE8、360。

來源:



以下是源代碼:

<style type="text/css">
body{

color:#383835;
font-family:Arial, Arial, Helvetica, sans-serif;
}


#bubblemenu li {
display: inline;
margin-left: 15px;
cursor:pointer;
}


#bubblemenu li > div {
width: 150px;
min-height: 100px;
position: absolute;
display: inline;
margin-left: -120px;
padding: 5px;
visibility:hidden;
opacity: 0;
margin-top: -125px;
background: #ffffff;
font-size:1em;

/* Setting the border-radius property for all Browsers */
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari and Chrome */
border-radius: 5px; /* Browsers that Support it like Opera */

/* Setting the box-shadow property for all Browsers */
-moz-box-shadow: 0 0 8px gray; /* Firefox */
-webkit-box-shadow: 0 0 8px gray; /* Safari and Chrome */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=3); /* IE */
box-shadow: 0 0 8px gray; /* Browsers that Support it like Opera */

/* Setting the transition property for all Browsers */
-moz-transition: all 0.5s ease-in-out; /* Firefox 柯 樂 義*/
-webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.5s ease-in-out; /* Opera */
transition: all 0.5s ease-in-out; /* Browsers that Support it */


}


#bubblemenu li:hover > div {

visibility:visible;
opacity: 1;
margin-top: -150px;

/* Setting the transition property for all Browsers */
-moz-transition: all 0.5s ease-in-out; /* Firefox */
-webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.5s ease-in-out; /* Opera */
transition: all 0.5s ease-in-out; /* Browsers that Support it */
}
</style>

<ul id="bubblemenu">
<li>

<div>
本網站的名稱:
本網站的網址:
本站提供jQuery特效,Javascript實例,ASP.NET源碼等內容資料,歡迎訪問!
</div>
</li>
<li>
光標停留
<div>
這是提醒內容。。。
</div>
</li>
<li>
Bill Gates
<div>
640K ought to be enough for anybody.
</div>
</li>
<li>
Sam Ewing
<div>
Computers are like bikinis. They save people a lot of guesswork.
</div>
</li>
</ul>

<div style="text-align:center;clear:both">
<p>適用浏覽器:FireFox、Chrome、Safari、Opera、傲游、搜狗、IE8、360。</p>
<p>來源:<a href="http:///" target="_blank"></a></p>
</div>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved