css - 右侧悬停宽度上的固定元素

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>

这是工作 fiddle http://jsfiddle.net/g5ytxsws/

Answer 1

当鼠标悬停在一个链接上时，需要更新其他链接的 right 属性:

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

因为宽度上有一个transition，所以也应该在右边上设置一个transition。将 transition 行替换为以下两行:

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

参见 this demo .