我有一张地图,上面有一些别针,
position: absolute
. 如何使所有设备的针响应?有没有办法让他们跟随他们的父母
div
?我试过用
media-queries
但是,这些别针要花很长时间才能定型。
这是一个
demo
.
HTML:
<div class="map-wrapper">
<div class="map"></div>
<a class="rpin code-warszawa"></a>
<a class="rpin code-gdansk"></a>
<a class="rpin code-kalisz"></a>
<a class="rpin code-kielce"></a>
<a class="rpin code-konin"></a>
<a class="rpin code-krakow"></a>
<a class="rpin code-ostrow-wielkopolski"></a>
<a class="rpin code-poznan"></a>
<a class="rpin code-wroclaw"></a>
</div>
CSS:
.map-wrapper {
width: 50%;
height: 60vh;
margin: 0 auto;
position: relative;
}
.map {
width: 100%;
min-width: 100%;
min-height: 100%;
margin: 0 auto;
background-image: url('https://s33.postimg.cc/v6fu8qirj/rst-map.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.rpin {
position: absolute;
display: block;
width: 30px;
height: 40px;
background: url('https://s33.postimg.cc/6d6a8b4yn/pin.png') no-repeat center center;
background-size: contain;
transform: translateX(-50%) translateY(0);
filter: brightness(1) contrast(1.1);
transition: all .3s ease;
}
.rpin:hover {
cursor: pointer;
transform: translateX(-40%) scale(1.05);
}
.code-warszawa {
bottom: 55.9282%;
left: 65.5994%;
}
.code-gdansk {
bottom: 89.858%;
left: 45.716%;
}
.code-kalisz {
bottom: 45.2392%;
left: 39.4641%;
}
.code-kielce {
bottom: 27.9065%;
left: 62.2945%;
}
.code-konin {
bottom: 53.4868%;
left: 41.3139%;
}
.code-krakow {
bottom: 14.1059%;
left: 57.1113%;
}
.code-ostrow-wielkopolski {
bottom: 43.573%;
left: 36.9038%;
}
.code-poznan {
bottom: 56.831%;
left: 31.9521%;
}
.code-wroclaw {
bottom: 33.6384%;
left: 32.7036%;
}