我有一个很大的挑战在这里！
设计师送这个灯树有一些光点，对小鼠的悬停时应该显示的菜单页面的链接的网站。 不仅如此，在悬停时，一个复盖shuld被激活的更改色泽的整个网站(某种黑色的复盖减少的透明度)
这个问题我面对的是我真的不知道在哪里，甚至启动这个！ 我以为实现某种图像地图，但然后我不知道如何设置，它响应，它真的很难我认为一个解决方案设计的挑战。
你可以在截图中看到，光树已经被作为头部和背景点的位置应超过一些具体部分的树。
帮助将非常感激
1
这可能是一个起点。 只要你知道你的图像大小，在你的情况是914x913...你可以使用 position: absolute; 和像素的左右，上，下根据你想要它...它只是问题的衡量(一个小的试验和误差太)。 看到代码...我创建了两个"热点"对你开始(概述在红色)。 和框显示，当你翻车是存在的，你可以玩的定位，显然风格的更好比一个普通的箱子。 顺便说一下， <span></span> 需要的只是允许的"热点"是单独的，否则光芒将做奇怪的事情与你的背景图像。 哦，如果你计划要有这种支持小视你将不得不增加媒体的查询，为每个位置来调整的各个热点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<title>Test</title>
<style>
body {
font-family: sans-serif;
color: white;
}
.container {
background-image: url('https://i.stack.imgur.com/lzxlC.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
display: flex;
width: 914px;
height: 913px;
margin: 0 auto;
position: relative;
}
/* SPOT 1 */
.spot-1 {
position: absolute;
left: 323px;
top: 148px;
}
.spot-1 span {
border: 3px solid #FF6F6F;
border-radius: 50px;
height: 30px;
width: 30px;
display: flex;
align-self: center;
}
.spot-1:hover span {
box-shadow: 0 0 60px 30px #fff, 0 0 140px 90px #009EAB;
animation: fadeIn 1s linear;
}
.box-1 {
display: none;
}
.spot-1:hover .box-1 {
display: flex;
width: 80px;
height: 25px;
background: black;
color: white;
position: relative;
left: 50px;
padding: 12px;
font-size: 10px;
}
/* SPOT 2 */
.spot-2 {
position: absolute;
left: 515px;
top: 163px;
}
.spot-2 span {
border: 3px solid #FF3F3F;
border-radius: 50px;
height: 30px;
width: 30px;
display: flex;
align-self: center;
}
.spot-2:hover span {
box-shadow: 0 0 60px 30px #fff, 0 0 140px 90px #009EAB;
animation: fadeIn 1s linear;
}
.box-2 {
display: none;
}
.spot-2:hover .box-2 {
display: flex;
width: 80px;
height: 25px;
background: black;
color: white;
position: relative;
left: 50px;
padding: 12px;
font-size: 10px;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="container">
<div class="spot-1"><span></span>
<div class="box-1">HOWDY!</div>
</div>
<div class="spot-2"><span></span>
<div class="box-2">HI</div>
</div>
</div>
</body>
</html>