纯css实现鼠标滑过弹出层效果
发布时间：2013-10-16 16:42:47 作者：佚名 
我要评论
我要评论弹出层想必大家都有见到过吧，在以前或许是使用js实现的，不过现在我们可以使用纯css来实现了，下面有个不错的示例，感兴趣的朋友可以参考下
复制代码
代码如下:<!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>
相关文章
这篇文章主要介绍了纯CSS3实现鼠标滑过按钮动画第二节,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-07-16- 本文给大家分享css代码实现鼠标滑过鼠标点击的写法，非常不错，具有参考借鉴价值，需要的朋友参考下吧2016-12-26
- 这篇文章主要为大家详细介绍了CSS3制作炫酷带方向感应的鼠标滑过图片3D动画，具有一定的参考价值，并兼容目前最新的各类主流浏览器，感兴趣的小伙伴们可以参考一下2016-03-16
- 这篇文章主要为大家分享了8组超炫酷纯CSS3鼠标滑过图片动画效果，每一个动画效果都很精彩，值得大家学习借鉴，感兴趣的小伙伴们可以参考一下2016-03-16
- 关于星星评分效果大家一定都不会陌生，当鼠标滑过的时候会使相应的星星变得高亮，下面就介绍一下如何利用css实现鼠标滑过五角星高亮效果，对此功能感兴趣的朋友一起学习吧2016-01-20
- 这篇文章主要为大家介绍了纯CSS实现鼠标滑过显示子菜单的二级菜单效果,通过简单的css针对hover设置实现鼠标滑过显示二级菜单的功能,具有一定参考借鉴价值,需要的朋友可以参2015-09-14
- 鼠标滑过文字弹出一段说明文字CSS实现，无JS代码，下面代码直接拷贝了就可用2014-05-20
- 鼠标滑过时更换图片的效果有很多方法可以实现，在本文将为大家介绍喜爱如何通过css来实现，感兴趣的朋友，不要错过2013-10-12
- 鼠标滑过改变文字的效果想必很多朋友都有遇到过吧，本文为大家介绍下css是如何实现的，感兴趣的朋友可以了解下2013-09-09
这篇文章主要介绍了使用css的filter写鼠标滑过效果的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编2020-08-13
最新评论