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

新建html文档。

书写hmtl代码。

 

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

 

   

   

     

Embed a image as youu like

     

       

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

       

查看这里

     

   

 

 

   

   

     

查看这里

     

       

对就是这里，详细描述

     

   

 

 

   

   

     

Popover title

     

       

对就是毙互这里，详细描述

     

   

 

 

   

   

     

Yet another title

     

       

对就是这里，详细描述

     

   

 

         良巨    

初始化css代码。

书写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; }

代码整体结构。

查看效果。