0

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

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

如果可能的话，我想纯粹使用 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;
            }
        }
    }
}
4

1 回答 1

2

如果您考虑使用背景图像，您可以执行以下操作：

<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);
    }
}

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

于 2013-05-12T15:08:43.073 回答