纯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 class=page1> <p align="center" class="pageLink"></p> </div> <div 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 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">

学习交流