純CSS3實(shí)現(xiàn)鼠標(biāo)懸停提示氣泡效果

發(fā)布時(shí)間：2014-02-28 11:09:39 作者：佚名

鼠標(biāo)懸停就是指我們鼠標(biāo)指向菜單時(shí)提示此菜單的相關(guān)功能與內(nèi)容了，下面我們使用純css3實(shí)現(xiàn)鼠標(biāo)懸停提示氣泡效果，希望文章對各位有所幫助

<!DOCTYPE HTML><html>    <head>        <title>CSS3制作鼠標(biāo)懸停提示氣泡內(nèi)容菜單</title>        <style type="text/css">            body{             background:#D6D3C9;    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>    </head>    <body>    <h1>Coda Effect With CSS3</h1>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <br/>    <ul id="bubblemenu">        <li>            Penn Jillett            <div>               My favorite thing about the Internet is that you get to go into the private world of real creeps without having to smell them.             </div>        </li>        <li>            Thomas Watson            <div>                I think there is a world market for maybe five computers.            </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=" color:#000;width:600px;margin:0 auto; text-align:center; font-size:12px;"></div></body></html></td>   </tr> </table>

提示：您可以先修改部分代碼再運(yùn)行

Tag：鼠標(biāo)懸停氣泡

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

純CSS3實(shí)現(xiàn)鼠標(biāo)懸停提示氣泡效果

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容