图像映射不起作用

Question

这里我使用的是图像 mapping.but 问题是当我更改图像的宽度和高度时它无法处理图像当我将鼠标悬停在圆 hover-content1 出现时我绘制的某个圆. 图片：

在没有使用图像映射之后。我尝试将鼠标悬停到圆圈 hover-content1 opacity: 1 mouseout opacity: 0。但不幸的是，这也不起作用。

任何人都可以建议我如何使用 CSS 或 jquery 做到这一点没问题吗？

.headset-image{
 width: 100%;
 margin: 0 auto;
 padding: 200px;
}
.headset-image img {
 position: relative;
 width: 50%;
 height: auto;
}
.hover-wrapper {
 /*position: relative;*/
}
.hover-wrapper .hover-content1,
.hover-wrapper .hover-content2,
.hover-wrapper .hover-content3,
.hover-wrapper .hover-content4 {
    display: flex;
    width: 10%;
    flex-direction: column;
    text-align: justify;
}
h4.hover-head-content {
    margin: 0;
    padding: 2px 4px 5px;
    font-size: 10px;
    font-weight: bold;
}
p.hover-para-content {
    margin: 0;
    padding: 4px;
    font-size: 12px;
    line-height: 1.40;
}
.hover-content1 {
    position: absolute;
    top: 15%;
    left: 13%;
    padding: 5px;
 opacity: 1;
    color: #ffffff;
    background: rgba(0,0,0,0.5);
}
.hover-content2 {
 position: absolute;
    top: 55%;
    left: 16%;
    padding: 5px;
 opacity: 1;
    color: #ffffff;
    background: rgba(0,0,0,0.5);
}
.hover-content3 {
 position: absolute;
    top: 58%;
    left: 36%;
    padding: 5px;
 opacity: 1;
    color: #ffffff;
    background: rgba(0,0,0,0.5);
}
.hover-content4 {
 position: absolute;
    top: 1%;
    left: 36%;
    padding: 5px;
 opacity: 1;
    color: #ffffff;
    background: rgba(0,0,0,0.5);
}
.loading-content1:hover .hover-content1 {
 opacity: 1;
}
/* circle animation */
.loading-content1 .loading-circles {
 position:absolute;
 left:19%;
 top:37%;
}
.loading-content2 .loading-circles {
 position:absolute;
 left:29%;
 top:53%;
}
.loading-content3 .loading-circles {
 position:absolute;
 left:37%;
 top:50%;
}
.loading-content4 .loading-circles {
 position:absolute;
 left:38%;
 bottom: 65%;
}
.loading-circles > .circle{
 display: inline-block;
 position: absolute;
 height: 15px;
 width: 15px;
 border-radius: 50%;
 -webkit-transform-origin: 0 0;
 transform-origin: 0 0; 
 -webkit-transform: scale(1,1)translate(-50%,-50%);
 transform: scale(1,1)translate(-50%,-50%);
 -webkit-animation: fade 1s linear infinite;
 animation: fade 1s linear infinite;
 background: red;
 opacity: 1;
}
.circle.hold{
 -webkit-animation:none;
}
.circle.first+.circle{
 -webkit-animation-delay:.33s;
 animation-delay:.33s;
}
.circle.first+.circle+.circle{
 -webkit-animation-delay:.66s;
 animation-delay:.66s;
}
@-webkit-keyframes fade {
  from{
    opacity:1;
    -webkit-transform:scale(1,1)translate(-50%,-50%);
  }
  to{
    opacity:0;
    -webkit-transform:scale(2,2)translate(-50%,-50%);
  }
}
@keyframes fade {
  from{
    opacity:1;
    transform:scale(1,1)translate(-50%,-50%);
  }
  to{
    opacity:0;
    transform:scale(2,2)translate(-50%,-50%);
  }
}

<div class="section-image">

  <div class="headset-image">
   <img src="https://preview.ibb.co/iVKhMm/headset.jpg" class="headphone" alt="">
  </div>

  <!-- hover-effect-1 -->
  <div class="hover-wrapper">
   <div class="loading-content1">
    <div class="loading-circles">
     <div class="circle hold"></div>
     <div class="circle first"></div>
     <div class="circle"></div>
    </div>
   </div>

   <div class="hover-content1">
    <h4 class="hover-head-content">ACOUSTIC NOISE CANCELLING</h4>
    <p class="hover-para-content">
     More than 40 years of noise-cancelling obsession makes quiet sound quieter and music sound better.
    </p>
   </div>
  </div>

  <!-- hover-effect-2 -->
  <div class="hover-wrapper">
   <div class="loading-content2">
    <div class="loading-circles">
     <div class="circle hold"></div>
     <div class="circle first"></div>
     <div class="circle"></div>
    </div>
   </div>

   <div class="hover-content2">
    <h4 class="hover-head-content">ACOUSTIC NOISE CANCELLING</h4>
    <p class="hover-para-content">
     More than 40 years of noise-cancelling obsession makes quiet sound quieter and music sound better.
    </p>
   </div>
  </div>

  <!-- hover-effect-3 -->
  <div class="hover-wrapper">
   <div class="loading-content3">
    <div class="loading-circles">
     <div class="circle hold"></div>
     <div class="circle first"></div>
     <div class="circle"></div>
    </div>
   </div>

   <div class="hover-content3">
    <h4 class="hover-head-content">ACOUSTIC NOISE CANCELLING</h4>
    <p class="hover-para-content">
     More than 40 years of noise-cancelling obsession makes quiet sound quieter and music sound better.
    </p>
   </div>
  </div>

  <!-- hover-effect-4 -->
  <div class="hover-wrapper">
   <div class="loading-content4">
    <div class="loading-circles">
     <div class="circle hold"></div>
     <div class="circle first"></div>
     <div class="circle"></div>
    </div>
   </div>

   <div class="hover-content4">
    <h4 class="hover-head-content">ACOUSTIC NOISE CANCELLING</h4>
    <p class="hover-para-content">
     More than 40 years of noise-cancelling obsession makes quiet sound quieter and music sound better.
    </p>
   </div>
  </div>
 </div>

Answer 1

Imagemap 没有响应，但您可以使用任何插件使其响应。这个我用过，效果不错：

https://github.com/stowball/jQuery-rwdImageMaps

您还有：

https://github.com/davidjbradshaw/imagemap-resizer

图像映射不起作用

Image mapping not working

html

css

jquery

jquery-ui

imagemap