Question

我正在尝试创建一个可缩放的地图，当鼠标悬停在地图图像上时可以正常工作，类似于地图在Flickr上的工作方式（请参阅右侧栏上的地图 - http://www.flickr.com/photos/grynch108/5926065001/in/photostream/）。 / p>

默认情况下，地图缩小，当鼠标悬停在地图上时，它会放大，当鼠标悬停在地图中心时，它会进一步缩放到街道级别。

如果可能的话，我想纯粹使用CSS（没有JavaScript）。我主要使用它（当鼠标悬停在鼠标上方时它会放大，当鼠标接近中心时再次放大），然而，在鼠标接近中心并完全放大后，除非鼠标完全离开元素，否则它不会再缩小。当鼠标离开中心区域时，我希望它缩放到第二级。我希望这是有道理的。

这是我工作的JSFiddle。 http://jsfiddle.net/garethlewis83/ejvRh/

注意：CSS是从SASS生成的，所以我在下面包含了我的SASS代码。

aside.photo-sidebar {
    margin-left:20px;
    width:296px;
    display: inline-block;
    vertical-align: top;

    div#photo-map {
        position: relative;

        a#map-zoom-out, a#map-zoom-in {
            position:absolute;
            height: 100px;
            width: 300px;
            top:0;
            left:0;
        }

        a#map-zoom-out {
            opacity: 1;
            z-index: 10;

            transition: all 0.25s ease;

            &:hover {
                opacity: 0;
            }
        }

        a#map-zoom-in {
            z-index: 5;
        }

        a#map-zoom-street {
            height: 20px;
            left: 140px;
            opacity: 0;
            position: absolute;
            top: 40px;
            width: 20px;
            z-index: 20;

            transition: all 0.25s ease;

            &:hover {
                opacity: 1;

                img {
                    display: block;
                }
            }

            img {
                display: none;
                margin: -40px 0 0 -140px;
            }
        }
    }
}

Answer 1

如果你考虑使用背景图片，你可以这样做：

<div class="marker" href="#">°</div>
<div class="mymap"></div>

<强> CSS：

.mymap {
    position:absolute;
    width:4px;
    height:16px;
    padding:42px 148px;
    background:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=4&size=300x100&sensor=false);
    z-index:1;
}
.marker{
    position:absolute;
    top:22px;
    left:121px;
    padding:20px 27px 15px;
    background:none;
    z-index:2;
    color:red;
}
.mymap:hover {
    background:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=8&size=300x100&sensor=false);
}
.marker:hover + .mymap {
    background-image:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=14&size=300x100&sensor=false);
}

请注意使用相邻的选择器进行最终缩放。

<强> jsfiddle

在 Sass 中，这很简单：

.mymap {
    position:absolute;
    width:4px;
    height:16px;
    padding:42px 148px;
    background:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=4&size=300x100&sensor=false);
    z-index:1;
    &:hover {
        background:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=8&size=300x100&sensor=false);
    }
}
.marker {
    position:absolute;
    top:22px;
    left:121px;
    padding:20px 27px 15px;
    background:none;
    z-index:2;
    color:red;
    + .mymap {
    background-image:url(http://maps.googleapis.com/maps/api/staticmap?center=40.70723,-73.998298&zoom=14&size=300x100&sensor=false);
    }
}

如果您使用精灵而不是单独的图像，那么您也可以使用第一张图像加载所有地图图像。

“离开悬停”时css悬停伪类问题

1 个答案: