.bubble { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; box-shadow: 0 2px 2px rgba(0,0,0,0.2); -webkit-transition: background-color .15s ease-in-out; -moz-transition: background-color .15s ease-in-out; -o-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out } .bubble-4 { width: 56px; height: 56px; border-radius: 28px; position: relative; background-image: url(img/map/bubble-4.png) } .bubble-4_tri { position: absolute; top: 45px; left: 20px; width: 0; height: 0; border: 8px solid transparent; border-bottom-color: #fff } .bubble-4_tip { position: absolute; top: 61px; background-color: #fff; height: 28px; line-height: 28px; left: -20px; width: 100px; text-align: center; border-radius: 2px; box-shadow: 0 2px 1px #A7A7A7; overflow: hidden; text-overflow: ellipsis } .bubble-3 { height: 24px; line-height: 24px; cursor: pointer; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,0.3) } .bubble-3 .num { padding: 0 3px; display: inline-block; background-color: #00a75b; border-radius: 2px; border: 1px solid #00a75b; min-width: 40px; -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out } .bubble-3 .num b { font-weight: bold } .bubble-3 .arrow-up { border: 4px solid transparent; border-top-width: 4px; border-top-color: #00a75b } .bubble-3 .name { height: 30px; color: #333; position: absolute; z-index: -1; line-height: 30px; -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out; opacity: 0; visibility: hidden } .bubble-3 .name-des { background-color: #fff; display: inline-block; padding: 0 6px; border-radius: 0 3px 3px 0; box-shadow: 0 2px 2px rgba(0,0,0,0.2) } .bubble-3 .name-des a { color: #333 } .bubble-3:hover .num,.bubble-3.clicked .num,.bubble-3.hovered .num { background-color: #e4393c; border-color: #e4393c; color: #fff } .bubble-3:hover .name,.bubble-3.clicked .name,.bubble-3.hovered .name { visibility: visible; opacity: 1 } .bubble-3:hover .arrow-up,.bubble-3.clicked .arrow-up,.bubble-3.hovered .arrow-up { border-top-color: #e4393c } .bubble-3:hover .arrow,.bubble-3.clicked .arrow,.bubble-3.hovered .arrow { border-top-color: #e4393c } .bubble-3.ditie_clicked .num { background-color: #0085FD; border-color: #0085FD } .bubble-3.ditie_clicked .arrow-up { border-top-color: #0085FD } .bubble-3.ditie_clicked .arrow { border-top-color: #0085FD } .label-clicked { z-index: 3 !important } .arrow-up { opacity: .9999; zoom:1} .arrow-up,.arrow { border: 6px solid transparent; border-top-color: #00a75b; border-top-width: 8px; display: block; width: 0; height: 0; margin: 0 auto; -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out } .arrow { border-top-color: #00a75b; margin-left: -6px; margin-top: -9px; position: relative } .bubble-2 { width: 78px; height: 78px; border: 1px solid transparent; background-color: #00a75b; background-color: rgba(0,167,91,0.9); border-radius: 50%; overflow: hidden; line-height: 18px; cursor: pointer } .bubble-2:hover { background-color: #e4393c; background-color: rgba(240,65,52,0.9) } .bubble-2.hover { background-color: #e4393c; background-color: rgba(240,65,52,0.9) } .bubble-2 .name { margin-top: 10px } .bubble-2 .num { font-size: 13px; font-weight: bold; margin-top: -2px; min-height: 10px } .bubble-2 .count { font-size: 12px; font-weight: bold; font-family: tahoma } .bubble-2 p { overflow: hidden; text-overflow: ellipsis; padding-left: 6px; padding-right: 6px } .bubble-21 { line-height: 20px } .bubble-21 .name { margin-top: 20px } .bubble-5 { width: 84px; height: 84px; line-height: 20px; font-size: 12px } .bubble-5 .name { margin-top: 12px } .bubble-6 .name { margin-top: 24px } .bubble-6 .count { font-size: 12px; font-family: tahoma } .bubble-8 { background-image: url(img/map/bubble-8.png); cursor: pointer } .bubble-9 { line-height: 20px } .bubble-9 .name { margin-top: 20px } .bubble-10 { background-image: url(img/map/btn-subway-staion.png); cursor: default } @media \0screen { .bubble-2 { background-position: center center; background-repeat: no-repeat; background-image: url(img/map/bubble2-ie8.png); background-color: transparent } .bubble-2:hover { background-image: url(img/map/bubble2-hover-ie8.png); background-color: transparent } .bubble-5 { background-position: center center; background-repeat: no-repeat; background-image: url(img/map/bubble5-ie8.png); background-color: transparent } .bubble-5:hover { background-image: url(img/map/bubble5-hover-ie8.png); background-color: transparent } } .resblock_label { width: 33px; height: 40px; background-image: url(img/map/sprite.svg); background-color: transparent; background-repeat: no-repeat; background-position: -222px 0 } .icon_transfer_station:after { display: inline-block; background-image: url(img/map/sprite.svg); background-repeat: no-repeat; position: relative; cursor: pointer } .map_icon { display: inline-block; background-image: url(img/map/sprite.svg); background-repeat: no-repeat; position: relative; cursor: pointer } .map_icon.icon_arrow_down { width: 12px; height: 12px; margin-left: 8px; background-position: -119px 0; top: 4px } .map_icon.icon_search { width: 13px; height: 13px; position: absolute; right: 14px; top: 20px; -webkit-transform: scale(1.21); -ms-transform: scale(1.21); -o-transform: scale(1.21) } .map_icon.icon_search.icon_search_green { background-position: -287px 0 } .map_icon.icon_checkbox { background-position: -143px 0 } .map_icon.icon_circle_entrance { width: 20px; height: 20px; background-position: -34px 0; top: 3px; margin-right: 10px } .map_icon.icon_subway_entrance { width: 16px; height: 20px; background-position: -70px 0; top: 5px; margin-right: 10px } .map_icon.icon_close_houselist { width: 10px; height: 16px; background-position: -171px 0; top: 2px } .map_icon.icon_redraw { width: 16px; height: 19px; background-position: -190px 0; margin-right: 4px; top: 4px } .map_icon.icon_jia { width: 8px; height: 8px; background-position: -271px 0; top: 3px } .map_icon.icon_jian { width: 8px; height: 8px; background-position: -279px 0; top: 3px } .icon_transfer_station:after { width: 16px; height: 16px; background-position: -255px 0; border: none; position: absolute; top: -4px; left: 5px } .count_hint { position: absolute; background: rgba(0,0,0,0.6); color: #fff; padding: 0 18px; border-radius: 2px; font-size: 12px; bottom: 20px; left: 50%; height: 26px; padding-bottom: 1px; line-height: 26px; font-weight: bold; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0) } .control { position: absolute; bottom: 70px; right: 22px; background-color: #fff; width: 28px; border: 1px solid #999999; box-shadow: 0 3px 5px rgba(0,0,0,0.12); border-radius: 4px } .control a { width: 28px; height: 28px; display: block; cursor: pointer; text-align: center } .control a:first-child { border-bottom: 1px solid #EDEDED } body .lianjiaim { right: 145px }