英文教程:鼠標(biāo)懸停(hover)效果
互聯(lián)網(wǎng) 發(fā)布時(shí)間:2008-10-17 19:24:24 作者:佚名
我要評(píng)論

前面一個(gè)CSS教程介紹了在網(wǎng)頁中利用CSS建立立體表格效果,今天給大家來一篇很不錯(cuò)的鼠標(biāo)懸停效果,也是用CSS實(shí)現(xiàn)的。
這是一個(gè)很棒的鼠標(biāo)懸停(hover)效果。從國外的網(wǎng)站上看到了,轉(zhuǎn)載過來。沒有作任何翻譯與編輯,大家可以償試閱讀英文教程,加油!
注意:此
前面一個(gè)CSS教程介紹了在網(wǎng)頁中利用CSS建立立體表格效果,今天給大家來一篇很不錯(cuò)的鼠標(biāo)懸停效果,也是用CSS實(shí)現(xiàn)的。
這是一個(gè)很棒的鼠標(biāo)懸停(hover)效果。從國外的網(wǎng)站上看到了,轉(zhuǎn)載過來。沒有作任何翻譯與編輯,大家可以償試閱讀英文教程,加油!
注意:此懸停效果在IE6中無效
實(shí)例預(yù)覽地址: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/
相關(guān)文章
jQuery實(shí)現(xiàn)鼠標(biāo)滑過hover選項(xiàng)卡切換效果特效源碼
一個(gè)jquery hover事件制作鼠標(biāo)滑過標(biāo)簽選項(xiàng)卡切換代碼。是一款非常優(yōu)秀的特效源碼。歡迎下載使用2015-07-02- 本組是一套效果非常炫酷的純CSS3炫酷圓形導(dǎo)航菜單特效。在鼠標(biāo)hover主菜單時(shí),所有的子菜單會(huì)圍繞圓形主菜單依次出現(xiàn)2017-03-21
CaptionHover.CSS實(shí)現(xiàn)4種超酷鼠標(biāo)滑過圖片過渡動(dòng)畫特效源碼
CaptionHover.css是一組超酷CSS3鼠標(biāo)滑過圖片過渡動(dòng)畫特效的插件,共有4種效果,歡迎下載使用2016-08-12html5+css3鼠標(biāo)懸停hover超鏈接導(dǎo)航條特效源碼 21種
hover超鏈接導(dǎo)航條特效源碼是一個(gè)利用css3 transition屬性制作的21種不同的鼠標(biāo)懸停效果的代碼。鼠標(biāo)hover或懸停時(shí),會(huì)觸發(fā)各種動(dòng)畫效果2016-03-3115種CSS3實(shí)現(xiàn)鼠標(biāo)懸停圖片hover動(dòng)畫過渡特效源碼
15款CSS3實(shí)現(xiàn)鼠標(biāo)懸停圖片動(dòng)畫過渡特效源碼是一款15種不同類型效果的css3 hover動(dòng)畫過渡效果代碼。本段代碼適應(yīng)于所有網(wǎng)頁使用2015-07-22純CSS3實(shí)現(xiàn)的鼠標(biāo)滑過特效動(dòng)畫庫Hover.css
是一段實(shí)現(xiàn)了當(dāng)下所有流行的表格/表單鼠標(biāo)經(jīng)過時(shí)所出現(xiàn)的特效動(dòng)畫代碼,包含了:背景動(dòng)態(tài)更改、圖標(biāo)動(dòng)畫、邊框動(dòng)畫效果等等,本段代碼適用于所有網(wǎng)頁使用,不收藏會(huì)后悔的2015-01-19不使用hover外部CSS樣式實(shí)現(xiàn)hover鼠標(biāo)懸停改變樣式
在DIV+CSS網(wǎng)頁布局中,有時(shí)我們不能直接使用外部CSS樣式控制DIV樣式,比如對(duì)a設(shè)置a:hover樣式,可以使用onMouseOver和onMouseOut實(shí)現(xiàn)對(duì)a標(biāo)簽或其它html標(biāo)簽設(shè)置hover樣式,2014-10-14css3實(shí)現(xiàn)圖片遮罩效果鼠標(biāo)hover以后出現(xiàn)文字
鼠標(biāo)hover 以后,圖片上面出現(xiàn)一個(gè)遮罩透明度變化,顯示設(shè)置好的文字,完全使用css 實(shí)現(xiàn),效果如下,喜歡的朋友可以參考下2013-11-05基于CSS3實(shí)現(xiàn)鼠標(biāo)hover圖文切換特效源碼
基于CSS3實(shí)現(xiàn)鼠標(biāo)hover圖文切換特效源碼是一款默認(rèn)顯示圖片,鼠標(biāo)經(jīng)過的時(shí)候滑動(dòng)顯示文字信息。本段代碼可以在各個(gè)網(wǎng)頁使用,有需要的朋友可以直接下載使用2017-08-21