鼠标点上去以后弹出层的实现

最新推荐文章于 2025-11-28 04:56:28 发布

最新推荐文章于 2025-11-28 04:56:28 发布 · 105 阅读

文章标签：

本文介绍了一种使用HTML和CSS实现的弹出式层菜单样式。通过设置特定的CSS样式，当鼠标悬停在菜单项上时，可以显示一个包含额外信息的弹出层。该方法不需要JavaScript即可实现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Untitled Document</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> *{margin:0; padding:0;} body{font-size:12px; font-family:"Times New Roman", Times, serif; background-color:#333;} #main{margin:100px auto; width:300px;} #main ul{list-style:none;} #main ul li{line-height:20px; border-bottom:1px dashed #00000;} #main ul li a{color:white; text-decoration:none; position:relative; display:block;} #main ul li a div{display:none;} #main ul li a:hover{ visibility:visible; color:red;} #main ul li a:hover div{position:absolute; left:100px; 10px;background-color:#696969; display:block; width:400px; height:400px; color:#000; overflow:hidden;} #main ul li a:hover div dt{float:left; width:8px; background:url(234.gif) center no-repeat;height:100px; display:block; background-color:#333;} #main ul li a:hover div dd{float:right; width:270px; height:auto; line-height:18px; padding:6px 10px;}</style> </head> <body> <p> </p> <p> </p> <div id="main"> <ul> <li> <a href="javascript:void(0);" mce_href="javascript:void(0);">第一个弹出式的层 <div> <dt> </dt> <dd> 弹出来的菜单你可以点击进行操作 </dd> </div> </a> </li> <li> <a href="javascript:void(0);" mce_href="javascript:void(0);">第二个弹出式的层 <div><dt></dt><dd> 弹出来的菜单你可以点击进行操作 </dd></div> </a> </li> <li> <a href="javascript:void(0);" mce_href="javascript:void(0);">第三个弹出式的层 <div><dt></dt><dd>弹出来的菜单你可以点击进行操作 </dd></div> </a> </li> <li> <a href="javascript:void(0);" mce_href="javascript:void(0);">第四个弹出式的层 <div><dt></dt><dd>弹出来的菜单你可以点击进行操作 </dd></div> </a> </li> <li> <a href="javascript:void(0);" mce_href="javascript:void(0);">第五个弹出式的层 <div><dt></dt><dd>弹出来的菜单你可以点击进行操作 </dd></div> </a> </li> </ul> </div> </body> </html>