<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Create a Block Hover Effect for a List of Links | Smiley Cat Web Design</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="Example of how to create a block hover effect for items in a list of links." /> <style type="text/css"> dl#officeMap{ margin: 0; padding: 0; background: transparent url(office.jpg) top left no-repeat; height: 262px; width: 350px; position: relative; } dt{ margin: 0; padding: 0; position: absolute; font-size: 85%; display: none; } dd{ margin: 0; padding: 0; position: absolute; font-size: 85%; } /* ---------- Hotspot Declarations ---------- */ dd#monitorDef{ top: 65px; left: 114px; } dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none; } dd#monitorDef a span{ display: none; } dd#monitorDef a:hover{ position: absolute; background: transparent url(office.jpg) -109px -317px no-repeat; top: -10px; left: -5px; } dd#monitorDef a:hover span{ display: block; text-indent: 0; vertical-align: top; color: #000; background-color: #F4F4F4; font-weight: bold; position: absolute; border: 1px solid #BCBCBC; bottom: 100%; margin: 0; padding: 5px; width: 250%; } dd#phoneDef{ top: 111px; left: 211px; } dd#phoneDef a{ position: absolute; width: 56px; height: 46px; text-decoration: none; } dd#phoneDef a span{ display: none; } dd#phoneDef a:hover{ background: transparent url(office.jpg) -211px -373px no-repeat; } dd#phoneDef a:hover span{ display: block; text-indent: 0; vertical-align: top; color: #000; background-color: #F4F4F4; font-weight: bold; position: absolute; border: 1px solid #BCBCBC; bottom: 100%; margin: 0; padding: 5px; width: 250%; } dd#caseDef{ top: 165px; left: 168px; } dd#caseDef a{ position: absolute; width: 81px; height: 87px; text-decoration: none; } dd#caseDef a span{ display: none; } dd#caseDef a:hover{ background: transparent url(office.jpg) -168px -427px no-repeat; } dd#caseDef a:hover span{ display: block; text-indent: 0; vertical-align: top; color: #000; background-color: #F4F4F4; font-weight: bold; position: absolute; border: 1px solid #BCBCBC; top: 100%; margin: 0; padding: 5px; width: 250%; } dd#notebookDef{ top: 101px; left: 72px; } dd#notebookDef a{ position: absolute; width: 96px; height: 54px; text-decoration: none; } dd#notebookDef a span{ display: none; } dd#notebookDef a:hover{ background: transparent url(office.jpg) -72px -625px no-repeat; } dd#notebookDef a:hover span{ display: block; text-indent: 0; vertical-align: top; color: #000; background-color: #F4F4F4; font-weight: bold; position: absolute; border: 1px solid #BCBCBC; top: 100%; margin: 0; padding: 5px; width: 150%; } dd#floppyDef{ top: 126px; left: 45px; } dd#floppyDef a{ position: absolute; width: 64px; height: 39px; text-decoration: none; } dd#floppyDef a span{ display: none; } dd#floppyDef a:hover{ background: transparent url(office.jpg) -45px -388px no-repeat; } dd#floppyDef a:hover span{ display: block; text-indent: 0; vertical-align: top; color: #000; background-color: #F4F4F4; font-weight: bold; position: absolute; border: 1px solid #BCBCBC; top: 100%; left: 1px; margin: 0; padding: 5px; width: 150%; } </style> </head> <body> <dl id="officeMap"> <dt id="monitor">1. 显示器</dt> <dd id="monitorDef"><a href="#"><span>显示器文字内容</span></a></dd> <dt id="phone">2. Phone</dt> <dd id="phoneDef"><a href="#"><span>Does this thing ever stop ringing?</span></a></dd> <dt id="case">3. PC Case</dt> <dd id="caseDef"><a href="#"><span>This is my crazy Linux box! Gotta love that Linux...</span></a></dd> <dt id="notebook">4. IBM ThinkPad</dt> <dd id="notebookDef"><a href="#"><span>Here’s my Linux notebook. Some crazy coding going on.</span></a></dd> <dt id="floppy">5. External Floppy Drive</dt> <dd id="floppyDef"><a href="#"><span>Floppy Drive. Ancient... I know!</span></a></dd> </dl> </body> </html>
