从右到左固定位置的过渡

Question

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

Answer 1

你在这里修好了

重要的是将 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;
}

从右到左固定位置的过渡

Transition with fixed position from right to left

css

transition