图像映射不起作用

Question

这里我正在使用图像映射。但问题是当我改变图像的宽度和高度时，当我悬停圆圈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