从右到左以固定位置过渡

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;
}