我正在制作一些将始终位于页面右侧的元素，但是当我想在元素上进行悬停类时，我遇到了问题。整个右侧都有宽度？
这是我的 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>
答案 0 :(得分：0)
当一个人悬停在一个链接上时，需要更新其他链接的right属性：
.container-right a.linkedin-share:hover ~ a {
right: -32px; /*80px - 48px*/
}
由于transition上有width，因此也应在right上设置转换。将transition行替换为以下两行：
transition: width 0.15s ease-in-out 0s, right 0.15s ease-in-out 0s;
right: 0;
请参阅this demo。