如何为图像区域映射添加悬停效果[重复]答案

【问题标题】：How to adding hover efect for image area mapping [duplicate]如何为图像区域映射添加悬停效果[重复]
【发布时间】：2018-12-05 19:11:40
【问题描述】：

如何在下面的代码中添加效果？我应该使用javascript和css吗...请帮助我。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Mapping Hover</title>
</head>
<body>

<style type="text/css">
#area1, #area2, #area3, #area4 {
	opacity: 0.8;
	transition: all .3s;
}
</style>

<div>
<img src="https://picsum.photos/300/300" width="300" height="300" usemap="#Map"/>
<map name="Map">
<area id="area1" shape="rect" coords="108,140,200,264" href="#">
<area id="area2" shape="rect" coords="9,140,101,264" href="#">
<area id="area3" shape="rect" coords="108,7,200,131" href="#">
<area id="area4" shape="rect" coords="8,7,100,131" href="#">
</map>
</div>
	
</body>
</html>

HTML 在这里。

【问题讨论】：

你想要实现什么样的悬停效果？
只想做不透明
看到这个link

标签： html css

【解决方案1】：

需要将以下代码移出body Tag

<style type="text/css">
#area1, #area2, #area3, #area4 {
    opacity: 0.8;
    transition: all .3s;
}
</style>

我建议你将 class 的值赋予 div 并在样式中尝试 'div class.hover #image'。例如，

<style type="text/css">
.container:hover #area1{
    opacity: 0.8;
    transition: all .3s;
}
</style>
<body>
<div class="container">

【讨论】：

你试过这个吗？
不幸的是它不起作用。