时间戳

首页 > 解决方案 > How to adding hover efect for image area mapping

html - How to adding hover efect for image area mapping

问题描述

How can I add effects to the code below? Should I do using javascript and css...Please help me.

<!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 is here.

标签： htmlcss

解决方案

您需要将以下代码移出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">

推荐阅读