英文教程：鼠標懸停（hover）效果

2024-07-11 08:25:02

字體：大中小

來源：轉載

供稿：網友

前面一個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