jquery鼠标移动到热点区域给对应的提示

来源：互联网 2023-03-16 23:54:48 302

工具/原料

adobe dreamweaver

方法/步骤

准备好需要用到的图标。

jquery鼠标移动到热点区域给对应的提示

1相关内容未经授权抓取自百度经验

新建html文档。

jquery鼠标移动到热点区域给对应的提示

书写hmtl代码。

div class="container" id="container1">

h2>鼠标悬停在热点处，3D立体展现说明效果/h2>

div class="popover right pop1" data-easein="cardInRight" data-easeout="cardOutRight" id="pop1">

div class="arrow">/div>

div class="popover-inner">

h3 class="popover-title">Embed a image as youu like/h3>

div class="popover-content"> img src="images/flower_small.jpg" alt="small" />

HTML content here. Change the position and size via CSS./

a href="#">查看这里/a>/

/div>

div class="popover top pop2" data-easein="cardInTop" data-easeout="cardOutTop" id="pop2">

div class="arrow">/div>

div class="popover-inner">

h3 class="popover-title">a href="#">查看这里/a>/h3>

div class="popover-content">

对就是这里，详细描述/

/div>

div class="popover left pop3" data-easein="cardInLeft" data-easeout="cardOutLeft" id="pop3">

div class="arrow">/div>

div class="popover-inner">

h3 class="popover-title">Popover title/h3>

div class="popover-content">

对就是这里，详细描述/

/div>

div class="popover bottom pop4" data-easein="cardInBottom" data-easeout="cardOutBottom" id="pop4">

div class="arrow">/div>

div class="popover-inner">

h3 class="popover-title">Yet another title/h3>

div class="popover-content">

对就是这里，详细描述/

/div>

img src="images/arrow1.png" alt="info" class="info-icon info-icon1" data-target="pop1" />

img src="images/arrow1.png" alt="info" class="info-icon info-icon2" data-target="pop2" />

img src="images/arrow1.png" alt="info" class="info-icon info-icon3" data-target="pop3" />

img src="images/arrow1.png" alt="info" class="info-icon info-icon4" data-target="pop4" />

img src="images/flower.jpg" alt="" class="largeimage">/div>

jquery鼠标移动到热点区域给对应的提示

初始化css代码。

style>

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

/style>

jquery鼠标移动到热点区域给对应的提示

书写css代码。

body { font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif; color: #404040; background: #cccccc; background-image: -radial-gradient(center, circle cover, #efefef, #cccccc); background-image: -moz-radial-gradient(center, circle cover, #efefef, #cccccc); background-image: -o-radial-gradient(center, circle cover, #efefef, #cccccc); background-image: radial-gradient(center, circle cover, #efefef, #cccccc); }

a, a:visited { color: #0088cc; text-decoration: none; }

a:hover { color: #005580; text-decoration: underline; }

h2 { margin: 12px auto; }

.container { position: relative; margin: 40px auto 50px auto; width: 900px; padding: 0; text-align: center; }

.largeimage { position: relative; z-index: 1000; }

img.info-icon { cursor: pointer; z-index: 1001; }

#container1 .info-icon1 { position: absolute; top: 210px; left: 288px; }

#container1 .info-icon2 { position: absolute; top: 265px; left: 576px; }

#container1 .info-icon3 { position: absolute; top: 280px; left: 220px; }

#container1 .info-icon4 { position: absolute; top: 54px; left: 520px; }

#container2 .info-icon1 { position: absolute; top: 170px; left: 223px; }

#container2 .info-icon2 { position: absolute; top: 340px; left: 644px; }

#container2 .info-icon3 { position: absolute; top: 363px; left: 370px; }

#container2 .info-icon4 { position: absolute; top: 140px; left: 530px; }

.popover { position: absolute; z-index: 1010; opacity: 0; display: none; width: 236px; /*height: 200px;*/

padding: 1px; text-align: left; white-space: normal; background-color: #ffffff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; }

#pop1 { position: absolute; width: 403px; top: 50px; left: 313px; }

#pop2 { position: absolute; top: 125px; left: 468px; }

#pop3 { position: absolute; top: 224px; left: -22px; }

#pop4 { position: absolute; top: 80px; left: 412px; }

#pop5 { position: absolute; top: 30px; left: 115px; }

#pop6 { position: absolute; top: 284px; left: 670px; }

#pop7 { position: absolute; top: 306px; left: 127px; }

#pop8 { position: absolute; top: 166px; left: 422px; }

jquery鼠标移动到热点区域给对应的提示