CSS懸停僞類的問題時，「離開懸停」

我試圖創建一個可縮放地圖，當鼠標懸停在地圖圖像的作品，類似於地圖上的Flickr如何工作（在地圖上看到正確的副作用酒吧 - http://www.flickr.com/photos/grynch108/5926065001/in/photostream/）。CSS懸停僞類的問題時，「離開懸停」

默認情況下，地圖被縮小，當鼠標懸停在地圖上，它會放大，並且當鼠標在地圖的中心盤旋，它進一步縮放到街道水平。

我想要實現這個純粹使用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; 
      } 
     } 
    } 
}

來源

2013-05-12 Gareth Lewis

我認爲你需要一個多格在那裏，像「中心懸停」元素。否則，有沒有一種簡單的方法來區分你是否在中間附近徘徊。 – ArleyM 2013-05-12 13:04:34

如果你會考慮使用背景圖片，你可以做這樣的事情：

<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

在

薩斯這將是非常簡單的：

.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-12 15:08:43

非常好。正是我想要的，更加整潔。 – 2013-05-12 16:12:42

CSS懸停僞類的問題時，「離開懸停」

回答

相關問題