复制代码代码如下:
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css" >
*{margin:0; padding:0;} /* 所有元素外边距为0 内边距为0 */
/* body中元素字体大小为12px,字体样式为:"Times New Roman", Times, serif,背景色:#333 */
body{font-size:12px; font-family:"Times New Roman", Times, serif; background-color:#333;}
/* id为main的元素上下外边距为100px,左右外边距为自动;宽度为300px */
#main{margin:100px auto; width:300px;}
/* id为main的元素中无序列表列表样式为隐藏 */
#main ul{list-style:none;}
/* id为main的元素中的无序列表下的li块 行高为20px, 下边框的样式为1px dashed #FC0 */
#main ul li{line-height:20px; border-bottom:1px dashed #FC0;}
/* id为main的元素中的无序列表下的li块 中的a标签 颜色为#E7E7E7;关闭文本修饰;相对定位;元素当做块元素显示,前后会有换行符*/
#main ul li a{color:#E7E7E7; text-decoration:none; position:relative; display:block;}
/* id为main的元素中的无序列表下的li块 中的a标签 下的div元素 隐藏 */
<span style="color:#FF0000"> #main ul li a div{display:none;}
#main ul li a:hover{color:#FFF;}
#main ul li a:hover div{position:absolute; left:280px; top:-40px; background-color:#FFF; display:block; width:300px; height:100px; 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;}</span>
</style>
</head>
<body>
<p>
</p>
<p>
</p>
<div id="main">
<ul>
<li><a href="javascript:void(0);">Customizing Form Objects and Validating Forms
<div><dt></dt>
<dd>Rollovers are very easy using Dreamweaver. All you need to do is export two images from Fireworks (the image itself and the rollover image). Next, in Dreamweaver, click on Insert>Rollover Image. Give a name to the image, choose the images from the folder icon and finally give the link to the image. That's it! You've now got a great looking effect for your site.
</dd>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">Best Time Saving Tips in Dreamweaver
<div><dt></dt>
<dd>Before uploading your site you need to make sure that there are no dead links in the site. You can do this by going to your site map, right clicking on any of the files and then clicking on 'check links'. Now you can choose to either check links in the entire site or within the selected file or folder. If there are any dead links you can fix them by using the folder icon to select the right files.
</dd>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">Customizing Form Objects and Validating Forms
<div><dt></dt>
<dd>After resizing an image in Dreamweaver, click on Commands>Optimize Image in Fireworks. You will get a dialog box saying 'Editing image.gif. Do you wish to use an existing Fireworks document as the source of image.gif.' Click on No and then click Update. The image is now updated and optimized in Dreamweaver. This saves you the trouble of opening the image in Fireworks, resizing it and exporting it again.
</dd>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">Dreamweaver Tips & Tutorials
<div><dt></dt>
<dd>We've shared some really cool tips on Macromedia Dreamweaver in this article. They are handy tips that all Dreamweaver users should know about to allow more flexibility and creativity while designing sites in Dreamweaver.
</dd>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">Jump Menus, Pop Up Windows and Swap Images
<div><dt></dt>
<dd>Rollovers are very easy using Dreamweaver. All you need to do is export two images from Fireworks (the image itself and the rollover image). Next, in Dreamweaver, click on Insert>Rollover Image.
</dd>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
标签:
css,鼠标滑过,弹出层
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
千金楼资源网 Copyright www.htabc.com
暂无“纯css实现鼠标滑过弹出层效果”评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]