利用CSS制作脸书_html/css_WEB-ITnose
程序员文章站
2023-12-28 11:07:46
...
很多网站都支持图片上的头像框识别,鼠标在头像框处,会提示一些人物信息。
这次就利用CSS实现这样一个功能:
div处主要包括两部分,一部分是图片;另一部分是链接以及脸框
大致的方法就是手动把hotspot这个span定位到每个脸对应的位置,可以在F12控制台中调整。当鼠标悬浮在链接上时,就会显示这个框:
.remote { width: 900px; height: 600px; position: relative; } .remote ul { margin: 0; padding: 0; list-style-type: none; } .remote a .hotspot{ position: absolute; /*display: block;*/ width: 50px; height: 60px; } .remote .卡加斯 a .hotspot { top: 200px; left: 165px; } .remote .黑手 a .hotspot { top: 115px; left: 205px; } .remote .基尔罗格 a .hotspot { top: 210px; left: 230px; } .remote .耐奥祖 a .hotspot { top: 180px; left: 575px; } .remote .古尔丹 a .hotspot { top: 280px; left: 645px; } .remote .格罗玛什 a .hotspot { top: 160px; left: 470px; } .remote .杜隆坦 a .hotspot { top: 170px; left: 345px; } .remote a .link { position: absolute; display: block; width: 10em; right: -11em; cursor: pointer; } .remote .卡加斯 a .link { top: 0; } .remote .黑手 a .link { top: 1.2em; } .remote .基尔罗格 a .link { top: 2.4em; } .remote .耐奥祖 a .link { top: 3.6em; } .remote .古尔丹 a .link { top: 4.8em; } .remote .格罗玛什 a .link { top: 6em; } .remote .杜隆坦 a .link { top: 7.2em; } .remote a:hover .hotspot, .remote a:focus .hotspot{ border: 1px solid #fff; } .remote a:hover .link, .remote a:focus .link{ color:#0066FF; }
查看视频观察效果!
推荐阅读
-
利用CSS制作脸书_html/css_WEB-ITnose
-
如何利用CSS实现图片的透明效果_html/css_WEB-ITnose
-
利用getComputedStyle方法获取元素css的属性值_html/css_WEB-ITnose
-
利用css3-animation来制作逐帧动画_html/css_WEB-ITnose
-
[HTML] 利用 Real Favicon Generator 制作 favicon_html/css_WEB-ITnose
-
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation 读书笔记(2)CSS3利用图层叠加实现多背景_html/css_WEB-ITnose
-
[HTML] 利用 Real Favicon Generator 制作 favicon_html/css_WEB-ITnose
-
如何利用CSS实现三角形效果_html/css_WEB-ITnose
-
利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的_html/css_WEB-ITnose
-
快速将网页版简书打造成具有个人特色的简书桌面应用_html/css_WEB-ITnose