英文教程：鼠标悬停（hover）效果
发布时间：2020-06-17 12:31:26 所属栏目：系统 来源：站长网
导读：前面一个CSS教程介绍了在网页中利用CSS建立立体表格效果，今天给大家来一篇很不错的鼠标悬停效果，也是用CSS实现的。 这是一个很棒的鼠标悬停（hover）效果。从国外的网站上看到了，转载过来。没有作任何翻译与编辑，大家可以偿试阅读英文教程，加油！ 注
|
前面一个CSS教程介绍了在网页中利用CSS建立立体表格效果，今天给大家来一篇很不错的鼠标悬停效果，也是用CSS实现的。 这是一个很棒的鼠标悬停（hover）效果。从国外的网站上看到了，转载过来。没有作任何翻译与编辑，大家可以偿试阅读英文教程，加油！ 注意：此悬停效果在IE6中无效 实例预览地址： IwouldliketosharesomeinsightonapieceofCSSI’veusedforthehomepageforawebsiteawhileagothatI’vebuilttogetherwithRogerJohansson. TheHTMLmarkup Let’stakealookfirstattheHTMLmarkupforthis.Firstweneedtothinkaboutthestructureofthispieceofcontent.HowshoulditbestructuredwithCSSdisabledandstillmakesensefortheuser.Ithinkabulletlistmakessense.Wesumupthe4differentwaystofindyourKansasCityHomesforSale.Thisisthe(X)HTMLmarkup: HTML： <h2>4differentwaystofindyourKansasCityHomesforSale</h2> <ulid="differences"> <liid="diff-1"><h3><em>1</em><ahref="benefits.html">SeeallMLShomeslikeaninsider—joinus</a></h3><div><p><ahref="benefits.html">Joinus</a>andsee<strong>2,207</strong>additionalhomes,e-mailupdates,andfreecustomwebsite.</p></div></li> <liid="diff-2"><h3><em>2</em>Whatismyhouseworth?</h3><div><p>Findthe<ahref="/"title="empty">valueofyourhome</a>fromanyofouragentswithourcompetitivemarketanalysis.</p></div></li> <liid="diff-3"><h3><em>3</em>Google™searchKansasCityareahomesinMLS</h3><div><p><ahref="/"title="empty">SearchvirtuallyallMLShomes</a>inthegreaterKansasCityareabyusingGoogle™.</p></div></li> <liid="diff-4"><h3><em>4</em>MapKansasCityrealestateinGoogle™maps</h3><div><p><ahref="cma.html"title="empty">Seethelocation</a>ofallKansasCityrealestatewithGoogle™maps—maporsatelliteviews.</p></div></li> </ul> IfyoulookatethepagewithCSSdisabled,Ithinkthismarkupiswellstructuredandit’sperfecttobuildthenecessaryCSStoachievethestyleIhaveinmind. Thebackgroundimages IfyoulookatthefinalpageandtheeffectIwanttoachievewiththetabs,youknowthatIneedtocreatebackgroundimagesforthisthatareabletogrowiftheuserenlargesthetext.Hereishowtheylook: diff-tabs-top-wide.gif diff-tabs-bottom-wide.gif You'llnoticethatboththehoverbackgroundandthedefaultbackgroundaresavedas1giffile.Thiswaythehovereffectwillgosmoothwithoutinteruption.Theentireimageisloadedandthebrowserdoesn’thavetoloadthehoverimagesonthemomenttheuserhoversthebox.Tobesuretheboxcangrowwesavethebottompartoftheboxandthetoppartofthebox,makingitlongenoughtobesuretherewillbenogaps(tillacertainenlargement). TheCSSstyles Theunorderedlist“differences” ThisistheCSSfortheliststartingwiththeunorderedlistofthe4boxes.TopreventthemarginstocollapseI’veaddedfloat:left. #differences{ margin:0.5em01.5em0; padding:0; list-style:none; width:100%; float:left; } Thelielementstyleslooklikethis: #differencesli{ margin:018px00; padding:0; float:left; background:url(../images/diff-tabs-top-wide.gif)no-repeat00; } Iaddaright-marginof18pxtocreateagutterbetweeneachbox.Thelastboxintherowdoesn’tneedthismargin.Eachlielementhasanid.Theidforthelastoneis#diff-4.SoIaddthisCSSstyle: #differencesli#diff-4{ margin-right:0; } Makingsurethetabbedboxescangrow Asyou’venoticed,we’velinkedthetoppartofthebackgroundimage(thetabshape)tothelielementviaCSS.Tomakesurethetabbedboxescangrowiftheuserenlargeshistext,weneedtoaddanextradivineachlielement.ThiswaywecanlinkthebottompartoftheimagetothisdivviaCSS: #differencesdiv{ font-size:0.94em; padding:6px; background:url(../images/diff-tabs-bottom-wide.gif)no-repeat0100%; } WithCSS3wedon’thavetogothroughthishassleofaddingextradivs,becauseCSS3allowsformultiplebackgroundimagesononeelement.ThisismytopfavoriteCSS3feature:) Creatingthehovereffect I’veusedbackgroundpositioningtocreatethehovereffectonthelielementusingthe:hoverpseudo-class.TheCSSlookslikethis: #differencesli:hover{ background-position:-156px0; } #differencesli:hoverdiv{ background-position:-156px100%; } Thexcoordinateissetto-156px.Thiswaythepinkorangepartofthebackgroundimagewillbeshown.Thefirststylerepresentsthetoppartofthetabbedboxandthe2ndonethebottompart.RememberIhadtoaddanextradivtomakesuretheboxcangrow(tillacertainenlargement). Thepageusesadynamicresolutiondependentlayout Notsureifyou’venoticedornot,butifyouresizeyourbrowserwindowtolessthen750pixelswide,thepagewilladjustitslayout.ThisisdoneusingajavascriptcreatedbyKevinHaleofParticleTreeincombinationwithCSS.I’musinganextraCSSstylesheetthatisappliedifthebrowserwindowisresizedtolessthen750pixels.Bydefaultthepage/siteusesthewiderversion,whichisaimedtoascreenresolutionof1024x768.About90%ofthevisitorsofthePrudentialKansasCityvisitorsareusingascreenresolutionofatleast1024x768pixels. HopefullysomeofyouhavelearnedfromthisarticleandareinspiredtouseCSSinacreativewaywithoutoverlookingtheaccessibilitypartofitandkeepingtherightstructureinmindforthe(X)HTML.I’mstillcreatingnewtemplatesforthiswebsiteonanoccasionalbasis.Thiswebsiteisratherbigandnewfeaturesareconstantlyaddedbytheclientandthedeveloper. Ohandlet’snotforgettomentionthatitisalwaysgreattoworktogetherwithRoger.He’spickyinwhathedoes,butthat’swhatIloveaboutworkingwithhim,andofcourseIalwayschallengehimwithmydesigns:) Previewurl: （编辑：源码网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
