从右到左的固定位置过渡

Question

尝试从右到左对固定元素进行过渡效果时出现问题。当我悬停时，所有 li 元素也会过渡。

https://jsfiddle.net/k0fow2jb/

Answer 1

你在这里修复了它

https://jsfiddle.net/k0fow2jb/3/

重要的是将 margin-left：auto 添加到您的 .side-menu li

.side-menu {
    z-index: 999;
    overflow: hidden;
    position: fixed;
    top: 25%; 
    right: 0;
}
.side-menu li{
    cursor: pointer;
    display: block;
    list-style-type: none;
    width: 40px;
    height: 40px;
    overflow: hidden;
    position: relative;
    transition: width 0.5s; 
  margin-left:auto;
}
.side-menu li a{
    position: relative;
    text-decoration: none;
    color: #FFFFFF;
}

.ask-questions {
    background: #19b5fe;
}
.ask-questions:hover{
  width: 150px;
}
.facebook-link {
    background: #3b5998;
}
.side-menu li:hover{
  width:150px;
}
.support-box{
    background: #dd4b39;
}