純css實(shí)現(xiàn)鼠標(biāo)滑過(guò)彈出層效果
發(fā)布時(shí)間：2013-10-16 16:42:47 作者：佚名 
我要評(píng)論
我要評(píng)論彈出層想必大家都有見(jiàn)到過(guò)吧，在以前或許是使用js實(shí)現(xiàn)的，不過(guò)現(xiàn)在我們可以使用純css來(lái)實(shí)現(xiàn)了，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下
復(fù)制代碼
代碼如下:<!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>無(wú)標(biāo)題文檔</title>
<style type="text/css" >
*{margin:0; padding:0;} /* 所有元素外邊距為0 內(nèi)邊距為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,左右外邊距為自動(dòng);寬度為300px */
#main{margin:100px auto; width:300px;}
/* id為main的元素中無(wú)序列表列表樣式為隱藏 */
#main ul{list-style:none;}
/* id為main的元素中的無(wú)序列表下的li塊 行高為20px, 下邊框的樣式為1px dashed #FC0 */
#main ul li{line-height:20px; border-bottom:1px dashed #FC0;}
/* id為main的元素中的無(wú)序列表下的li塊 中的a標(biāo)簽 顏色為#E7E7E7;關(guān)閉文本修飾;相對(duì)定位;元素當(dāng)做塊元素顯示,前后會(huì)有換行符*/
#main ul li a{color:#E7E7E7; text-decoration:none; position:relative; display:block;}
/* id為main的元素中的無(wú)序列表下的li塊 中的a標(biāo)簽 下的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>
相關(guān)文章
純CSS3實(shí)現(xiàn)鼠標(biāo)滑過(guò)按鈕動(dòng)畫第二節(jié)
這篇文章主要介紹了純CSS3實(shí)現(xiàn)鼠標(biāo)滑過(guò)按鈕動(dòng)畫第二節(jié),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-16CSS實(shí)現(xiàn)鼠標(biāo)滑過(guò)鼠標(biāo)點(diǎn)擊代碼寫法
本文給大家分享css代碼實(shí)現(xiàn)鼠標(biāo)滑過(guò)鼠標(biāo)點(diǎn)擊的寫法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2016-12-26CSS3制作炫酷帶方向感應(yīng)的鼠標(biāo)滑過(guò)圖片3D動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了CSS3制作炫酷帶方向感應(yīng)的鼠標(biāo)滑過(guò)圖片3D動(dòng)畫，具有一定的參考價(jià)值，并兼容目前最新的各類主流瀏覽器，感興趣的小伙伴們可以參考一下2016-03-16純CSS3實(shí)現(xiàn)8組超炫酷鼠標(biāo)滑過(guò)圖片動(dòng)畫
這篇文章主要為大家分享了8組超炫酷純CSS3鼠標(biāo)滑過(guò)圖片動(dòng)畫效果，每一個(gè)動(dòng)畫效果都很精彩，值得大家學(xué)習(xí)借鑒，感興趣的小伙伴們可以參考一下2016-03-16css實(shí)現(xiàn)鼠標(biāo)滑過(guò)五角星高亮效果
關(guān)于星星評(píng)分效果大家一定都不會(huì)陌生，當(dāng)鼠標(biāo)滑過(guò)的時(shí)候會(huì)使相應(yīng)的星星變得高亮，下面就介紹一下如何利用css實(shí)現(xiàn)鼠標(biāo)滑過(guò)五角星高亮效果，對(duì)此功能感興趣的朋友一起學(xué)習(xí)吧2016-01-20純CSS實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示子菜單的二級(jí)菜單效果
這篇文章主要為大家介紹了純CSS實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示子菜單的二級(jí)菜單效果,通過(guò)簡(jiǎn)單的css針對(duì)hover設(shè)置實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示二級(jí)菜單的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參2015-09-14CSS實(shí)現(xiàn)鼠標(biāo)滑過(guò)文字彈出一段說(shuō)明文字無(wú)JS代碼
鼠標(biāo)滑過(guò)文字彈出一段說(shuō)明文字CSS實(shí)現(xiàn)，無(wú)JS代碼，下面代碼直接拷貝了就可用2014-05-20CSS控制當(dāng)鼠標(biāo)滑過(guò)時(shí)更換圖片的效果
鼠標(biāo)滑過(guò)時(shí)更換圖片的效果有很多方法可以實(shí)現(xiàn)，在本文將為大家介紹喜愛(ài)如何通過(guò)css來(lái)實(shí)現(xiàn)，感興趣的朋友，不要錯(cuò)過(guò)2013-10-12css實(shí)現(xiàn)鼠標(biāo)滑過(guò)改變文字(中文變英文)
鼠標(biāo)滑過(guò)改變文字的效果想必很多朋友都有遇到過(guò)吧，本文為大家介紹下css是如何實(shí)現(xiàn)的，感興趣的朋友可以了解下2013-09-09
使用css的filter寫鼠標(biāo)滑過(guò)效果的實(shí)現(xiàn)示例
這篇文章主要介紹了使用css的filter寫鼠標(biāo)滑過(guò)效果的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編2020-08-13
