固定元素的寬度

Question

我正在那是要留總是在頁面右側的一些元素，但我有一個問題，當我想讓元素上懸停類。整個右側有這個寬度？

這裏是我的CSS

.container-right { 
    /* fixed position a zero-height full width container */ 
    position: fixed; 
    right: 0; 
    /* center all inline content */ 
    text-align: center; 
    top: 30%; 
} 
    .container-right a.linkedin-share, .container-right a.twitter-share, .container-right a.google-share { 
     display: block; 
     line-height: 48px; 
     margin: 0; 
     outline: medium none; 
     overflow: hidden; 
     padding: 8px 0; 
     position: relative; 
     text-align: center; 
     text-indent: -9999em; 
     transition: width 0.15s ease-in-out 0s; 
     width: 48px; 
     z-index: 100030; 
    } 

    .container-right a.linkedin-share { 
     background: #305891 none repeat scroll 0 0; 
    } 

    .container-right a.linkedin-share:hover { 
     width: 80px; 
    } 
    .container-right a.twitter-share { 
     background: #2ca8d2 none repeat scroll 0 0; 
    } 

    .container-right a.google-share { 
     background: #ce4d39 none repeat scroll 0 0; 
    } 

.action-linkedin { 
    background: #4498c8 none repeat scroll 0 0; 
    background: rgba(0, 0, 0, 0) url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M8%2012h4v14h-4zM23.27%2012.8c-1.49-.84-3.689-.91-5.27-.18v-.62h-4v14h4v-8.95l1.65-.79c.399-.19%201.289-.18%201.66.03.29.15.69.81.69%201.21v8.5h4v-8.5c0-1.84-1.15-3.82-2.73-4.7z%22%2F%3E%3Ccircle%20fill%3D%22%23fff%22%20cx%3D%2210%22%20cy%3D%228%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E") no-repeat scroll left center; 
} 

.action-twitter { 
    background: #2ca8d2 none repeat scroll 0 0; 
    background: rgba(0, 0, 0, 0) url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M26.67%209.38c-.779.35-1.63.58-2.51.69.9-.54%201.6-1.4%201.92-2.42-.85.5-1.78.87-2.78%201.06-.8-.85-1.94-1.38-3.19-1.38-2.42%200-4.379%201.96-4.379%204.38%200%20.34.04.68.11%201-3.64-.18-6.86-1.93-9.02-4.57-.38.65-.59%201.4-.59%202.2%200%201.52.77%202.86%201.95%203.64-.72-.02-1.39-.22-1.98-.55v.06c0%202.12%201.51%203.89%203.51%204.29-.37.1-.75.149-1.15.149-.28%200-.56-.029-.82-.08.56%201.74%202.17%203%204.09%203.041-1.5%201.17-3.39%201.869-5.44%201.869-.35%200-.7-.02-1.04-.06%201.94%201.239%204.24%201.97%206.71%201.97%208.049%200%2012.45-6.67%2012.45-12.45l-.01-.57c.839-.619%201.579-1.389%202.169-2.269z%22%2F%3E%3C%2Fsvg%3E") no-repeat scroll left center; 
} 

.action-google { 
    background: #ce4d39 none repeat scroll 0 0; 
    background: rgba(0, 0, 0, 0) url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M15.31%207.58c.56.47%201.73%201.44%201.73%203.3%200%201.81-1.03%202.67-2.05%203.47-.32.32-.69.66-.69%201.2s.37.83.64%201.05l.88.681c1.081.899%202.05%201.739%202.05%203.42%200%202.3-2.23%204.62-6.43%204.62-3.55%200-5.26-1.69-5.26-3.5%200-.881.44-2.131%201.88-2.98%201.52-.93%203.57-1.05%204.67-1.12-.34-.441-.73-.91-.73-1.661%200-.42.12-.66.24-.95-.27.02-.54.05-.78.05-2.59%200-4.06-1.93-4.06-3.84%200-1.12.51-2.37%201.57-3.28%201.39-1.15%203.06-1.35%204.38-1.35h5.041l-1.561.88-1.52.01zm-1.74%2010.85c-.2-.02-.32-.02-.56-.02-.22%200-1.54.05-2.57.39-.54.2-2.1.78-2.1%202.521s1.69%202.979%204.3%202.979c2.35%200%203.59-1.12%203.59-2.64.01-1.24-.8-1.91-2.66-3.23m.71-4.64c.56-.56.61-1.35.61-1.79%200-1.76-1.05-4.5-3.08-4.5-.64%200-1.32.32-1.71.81-.41.52-.54%201.17-.54%201.81%200%201.64.95%204.35%203.06%204.35.61%200%201.27-.29%201.66-.68%22%2F%3E%3Cpath%20d%3D%22M27.74%2010.31h-3.72v-3.71h-.92v3.71h-3.72v.93h3.72v3.71h.92v-3.71h3.72z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat scroll left center; 
} 

.container-right > a > span { 
    display: block; 
    margin: 0 auto; 
    overflow: hidden; 
    padding: 0; 
    position: relative; 
    text-indent: -9999em; 
    background-size: 32px auto !important; 
    height: 32px; 
    line-height: 32px; 
    width: 32px; 
} 

而且HTML

<div class="container-right"> 
    <a class="linkedin-share" href="#"><span class="action-linkedin" title="LinkedIn">LinkedIn</span></a> 
    <a class="twitter-share" href="#"><span class="action-twitter" title="Twitter">Twitter</span></a> 
    <a class="google-share" href="#"><span class="action-google" title="Google+">Google+</span></a> 
</div> 

，這裏是工作提琴 http://jsfiddle.net/g5ytxsws/

Answer 1

一個需要更新的其他環節right財產當一個人盤旋ov呃一個鏈接：

.container-right a.linkedin-share:hover ~ a { 
    right: -32px; /*80px - 48px*/ 
} 

由於沒有對width一個transition，應該建立在right過渡爲好。有以下兩行替換transition行：

transition: width 0.15s ease-in-out 0s, right 0.15s ease-in-out 0s; 
right: 0; 

見this demo。