Question

如何在以下代码中添加效果？我应该使用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在这里

Answer 1

您需要将以下代码从body标签中移出

<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">

如何为图像区域映射添加悬停效果

1 个答案: