css怎么做图片热点

CSS可以很方便的实现图片热点效果，让图片上的某个区域可以被点击或者悬浮时出现相关信息。

code>
    HTML结构：/code>
    

code>
    div id="hotspot-img">
      img src="example.jpg" alt="图片示例">
      a href="#" class="hotspot" data-coordinates="100,100,150,150">
    /a>
      a href="#" class="hotspot" data-coordinates="200,200,250,250">
    /a>
    /div>
    /code>
    

HTML结构中，我们将图片放在一个div里，然后创建两个class为“hotspot”的a标签，分别代表两个热点区域。data-coordinates属性用来标记热点的坐标位置，前两个数字代表左上角的坐标，后两个数字代表右下角的坐标。

code>
    CSS样式：/code>
    

code>
#hotspot-img {
      position: relative;
}
#hotspot-img .hotspot {
      position: absolute;
      background-color: rgba(0,0,0,0.5);
      cursor: pointer;
}
#hotspot-img .hotspot:hover:after {
      content: attr(title);
      display: block;
      position: absolute;
      bottom: -2em;
      left: 50%;
      transform: translateX(-50%);
      padding: 0.5em 1em;
      background-color: rgba(0,0,0,0.7);
      color: #fff;
      border-radius: 5px;
      white-space: nowrap;
}
    /code>
    

CSS样式中，我们给父元素设置position:relative，给子元素设置position:absolute，然后根据热点坐标用top、left、width和height来定位每个热点。我们还设置了鼠标悬浮在热点上时的相关样式，用after伪元素来显示相关信息。

通过以上的HTML和CSS代码，我们就可以很方便地实现图片热点效果，让用户可以在图片上点击或悬浮热点区域来获取相关信息。实现起来也比较容易，只需要简单的HTML结构和CSS样式就可以了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！