您现在的位置是:网站首页>列表内容
英文教程:鼠标悬停(hover)效果_CSS教程_CSS_网页制作_
2021-09-10 13:11:22 1077人已围观
简介 前面一个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:
4differentwaystofindyourKansasCityHomesforSale
1SeeallMLShomeslikeaninsider—joinus
2Whatismyhouseworth?
Findthe
3Google™searchKansasCityareahomesinMLS
4MapKansasCityrealestateinGoogle™maps
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/
点击排行
- 暗黑3杀戮广场传送门在哪 通往李奥瑞克的花园传送门位置_网络游戏_游戏攻略_
- 剑灵2016春节时装介绍_剑灵2016春节时装外观预览_网络游戏_游戏攻略_
- QQ飞车周年庆大回馈活动网址_QQ飞车周年庆大回馈活动奖励一览_网络游戏_游戏攻略_
- 枪神纪黑金虎鲨评测分析 枪神纪黑金虎鲨怎么样_网络游戏_游戏攻略_
- 天涯明月刀每日送钱礼包能开出多绑点_网络游戏_游戏攻略_
- CF人气道具五折限时折扣活动网址_CF人气道具五折限时折扣奖励_网络游戏_游戏攻略_
- 天涯明月刀猴年定制礼包多少钱 内容物品介绍_网络游戏_游戏攻略_
- 怪物猎人OL实用弓箭配装推荐 破坏王集中千里眼15_网络游戏_游戏攻略_
- 天涯明月刀面纱辟瑶叶多少钱 辟瑶叶外观介绍_网络游戏_游戏攻略_
本栏推荐
-
暗黑3杀戮广场传送门在哪 通往李奥瑞克的花园传送门位置_网络游戏_游戏攻略_
-
剑灵2016春节时装介绍_剑灵2016春节时装外观预览_网络游戏_游戏攻略_
-
QQ飞车周年庆大回馈活动网址_QQ飞车周年庆大回馈活动奖励一览_网络游戏_游戏攻略_
-
枪神纪黑金虎鲨评测分析 枪神纪黑金虎鲨怎么样_网络游戏_游戏攻略_
-
天涯明月刀每日送钱礼包能开出多绑点_网络游戏_游戏攻略_
-
CF人气道具五折限时折扣活动网址_CF人气道具五折限时折扣奖励_网络游戏_游戏攻略_
-
天涯明月刀猴年定制礼包多少钱 内容物品介绍_网络游戏_游戏攻略_
-
怪物猎人OL实用弓箭配装推荐 破坏王集中千里眼15_网络游戏_游戏攻略_
-
天涯明月刀面纱辟瑶叶多少钱 辟瑶叶外观介绍_网络游戏_游戏攻略_