"leaving hover"时的 css hover 伪类问题

Question

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

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

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

如果您要使用 sprite 而不是单独的图像，那么您还可以将所有 map 图像都加载到第一个图像中。