Question

[enter image description here] enter image description here

我正在尝试使用它，以便当用户将鼠标悬停在地图图钉上时，另一图像显示在图钉旁边，而不是在它的上方/上方。到目前为止，两个图像都已显示，但是当我尝试移动图像时，地图钉会随其移动，这是我所不希望的。我试图在地图图钉保持在相同位置之后进行悬停，但是那没有解决。如果可能的话，仅使用CSS / JS。

#map-pin1:hover
{
    background-image: url('img/demon-days.jpg');
    height: 100px;
    width: 100px;
}

#map-pin1:hover:after {
    content: url(img/map-pin1);
    display: block;
    top: 90px;
    left: 130px;
}

Answer 1

没有屏幕截图，很难100％知道您要做什么，但是除非您的top: 90px伪元素为left: 130px，否则:after和position: absolute将不起作用-这行得通吗？

#map-pin1:hover
{
    background-image: url('img/demon-days.jpg');
    height: 100px;
    width: 100px;
    position: relative;
}

#map-pin1:hover:after {
    content: url(img/map-pin1);
    position: absolute;
    top: 90px;
    left: 130px;
}

将鼠标悬停在另一图像上后，将出现悬停图像

1 个答案: