英文教程:鼠标悬停(hover)效果

前面一个CSS教程介绍了在网页中利用CSS建立立体表格效果,今天给大家来一篇很不错的鼠标悬停效果,也是用CSS实现的。   这是一个很棒的鼠标悬停(hover)效果。从国外的网站上看到了,转载过来。没有作任何翻译与编辑,大家可以偿试阅读英文教程,加油!   注意:此
前面一个CSS教程介绍了在网页中利用CSS建立立体表格效果,今天给大家来一篇很不错的鼠标悬停效果,也是用CSS实现的。
  这是一个很棒的鼠标悬停(hover)效果。从国外的网站上看到了,转载过来。没有作任何翻译与编辑,大家可以偿试阅读英文教程,加油!
  注意:此悬停效果在IE6中无效
  实例预览地址:http://www.prukc.com/
  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:http://www.prukc.com/
来源:芯晴网页特效//所属分类:CSS教程/更新时间:2016-04-20
相关CSS教程
  • 相关链接:

    复制本页链接

  • 栏目说明:网页特效代码,网页特效代码大全集锦-芯晴网页特效_CsrCode.Cn提供最大量的CSS教程,是您寻找CSS教程的最佳选择