純CSS3實現鼠標懸停提示氣泡效果

2024-07-11 08:38:42

字體：大中小

來源：轉載

供稿：網友

<br /><!DOCTYPE HTML><br /><html><br /> <head><br /> <title>CSS3制作鼠標懸停提示氣泡內容菜單</title><br /> <style type=”text/css”><br /> body{<br /> background:#D6D3C9;<br /> color:#383835;<br /> font-family:Arial, Arial, Helvetica, sans-serif;<br /> }</p><p> #bubblemenu li {<br /> display: inline;<br /> margin-left: 15px;<br /> cursor:pointer;<br /> }</p><p> #bubblemenu li > div {<br /> width: 150px;<br /> min-height: 100px;<br /> position: absolute;<br /> display: inline;<br /> margin-left: -120px;<br /> padding: 5px;<br /> visibility:hidden;<br /> opacity: 0;<br /> margin-top: -125px;<br /> background: #ffffff;<br /> font-size:1em;</p><p> /* Setting the border-radius property for all Browsers */<br /> -moz-border-radius: 5px; /* Firefox */<br /> -webkit-border-radius: 5px; /* Safari and Chrome */<br /> border-radius: 5px; /* Browsers that Support it like Opera */</p><p> /* Setting the box-shadow property for all Browsers */<br /> -moz-box-shadow: 0 0 8px gray; /* Firefox */<br /> -webkit-box-shadow: 0 0 8px gray; /* Safari and Chrome */<br /> filter: progid:DXImageTransform.Microsoft.Shadow(color=’#272229′, Direction=135, Strength=3); /* IE */<br /> box-shadow: 0 0 8px gray; /* Browsers that Support it like Opera */<br /> /* Setting the transition property for all Browsers */<br /> -moz-transition: all 0.5s ease-in-out; /* Firefox */<br /> -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */<br /> -o-transition: all 0.5s ease-in-out; /* Opera */<br /> transition: all 0.5s ease-in-out; /* Browsers that Support it */</p><p> }</p><p> #bubblemenu li:hover > div {</p><p> visibility:visible;<br /> opacity: 1;<br /> margin-top: -150px;</p><p> /* Setting the transition property for all Browsers */<br /> -moz-transition: all 0.5s ease-in-out; /* Firefox */<br /> -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */<br /> -o-transition: all 0.5s ease-in-out; /* Opera */<br /> transition: all 0.5s ease-in-out; /* Browsers that Support it */<br /> }<br /> </style><br /> </head><br /> <body><br /> <h1>Coda Effect With CSS3</h1><br /> <br/><br /> <br/><br /> <br/><br /> <br/><br /> <br/><br /> <br/><br /> <br/><br /> <ul id=”bubblemenu”><br /> <li><br /> Penn Jillett<br /> <div><br /> My favorite thing about the Internet is that you get to go into the private world of real creeps without having to smell them. </SPAN> </div> </div> <div id="iwvjtn8m0" class=page1> <p align="center" class="pageLink"></p> </div> <div id="iwvjtn8m0" class="fenxiang">  <div style="text-align:left">上一篇：<a href='/wen/2024/07-11/1342952.html'>Discuz7.2 IE9兼容性寫法杜工完全修補方案</a></div> <br> <div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1342954.html'>用css border實現尖三角的寫法(無圖片)</a></div> <br> <script src=/d/js/acmsd/gao21.js></script>  </div> <div id="iwvjtn8m0" class="pinglun">  <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您沒什么話要說嗎？"); obj.saytext.focus(); return false; } return true; } </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title"> <tr> <td><strong>發表評論</strong></td> <td align="right"><a href="/e/pl/?classid=215&id=1342953">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1342953&down=2"></script></span>條評論</a></td> </tr> </table> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="2"> <tr> <td width="56%" align="left">用戶名: <input name="username" type="text" class="inputText" id="username" value="" size="16" /></td> <td width="44%" align="left">密碼: <input name="password" type="password" class="inputText" id="password" value="" size="16" /></td> </tr> <tr> <td align="left">驗證碼: <input name="key" type="text" class="inputText" size="10" /> <img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td> <td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" /> 匿名發表</td> </tr> </table> <textarea name="saytext" cols="70" rows="6" id="saytext">

學習交流