如何在下面的代码中添加特效?我是不是应该用javascript和css...Please来帮助我。
<!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就在这里。
发布于 2018-12-06 04:37:24
您需要将以下代码移出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">
https://stackoverflow.com/questions/53639211
复制相似问题