0
我需要使用css在左右兩側創建幾乎相同的粘性滑動圖標。帶文字的右側圖標正常工作，但左側不是。使用css在左邊創建粘性滑動圖標
看到的代碼片段
.sticky-container{
\t \t /*background-color: #333;*/
\t \t padding: 0px;
\t \t margin: 0px;
\t \t position: fixed;
\t \t right: -119px;
\t \t /*top:230px;*/
\t \t width: 200px;
\t }
\t .sticky li{
\t \t list-style-type: none;
\t \t background-color: #333;
\t \t color: #efefef;
\t \t height: 43px;
\t \t padding: 0px;
\t \t margin: 0px 0px 1px 0px;
\t \t -webkit-transition:all 0.25s ease-in-out;
\t \t -moz-transition:all 0.25s ease-in-out;
\t \t -o-transition:all 0.25s ease-in-out;
\t \t transition:all 0.25s ease-in-out;
\t \t cursor: pointer;
\t
\t }
\t .sticky li:hover{
\t \t margin-left: -115px;
\t \t /*-webkit-transform: translateX(-115px);
\t \t -moz-transform: translateX(-115px);
\t \t -o-transform: translateX(-115px);
\t \t -ms-transform: translateX(-115px);
\t \t transform:translateX(-115px);*/
\t \t /*background-color: #8e44ad;*/
\t
\t }
\t .sticky li img{
\t \t float: left;
\t \t margin: 5px 5px;
\t \t margin-right: 10px;
\t }
\t .sticky li p{
\t \t padding: 0px;
\t \t margin: 0px;
\t \t text-transform: uppercase;
\t \t line-height: 43px;
\t }
\t .sticky-container-first{
\t \t /*background-color: #333;*/
\t \t padding: 0px;
\t \t margin: 0px;
\t \t position: fixed;
\t \t left: -119px;
\t \t /*top:230px;*/
\t \t width: 200px;
\t }
\t .sticky-first li{
\t \t list-style-type: none;
\t \t background-color: #333;
\t \t color: #efefef;
\t \t height: 43px;
\t \t padding: 0px;
\t \t margin: 0px 0px 1px 0px;
\t \t -webkit-transition:all 0.25s ease-in-out;
\t \t -moz-transition:all 0.25s ease-in-out;
\t \t -o-transition:all 0.25s ease-in-out;
\t \t transition:all 0.25s ease-in-out;
\t \t cursor: pointer;
\t }
\t .sticky-first li:hover{
\t \t margin-right: -115px;
\t \t /*-webkit-transform: translateX(115px);
\t \t -moz-transform: translateX(115px);
\t \t -o-transform: translateX(115px);
\t \t -ms-transform: translateX(115px);
\t \t transform:translateX(115px);*/
\t \t /*background-color: #8e44ad;*/
}
\t .sticky-first li img{
\t \t float: right;
\t \t margin: 5px 5px;
\t \t margin-left: 10px;
\t }
\t .sticky-first li p{
\t \t padding: 0px;
\t \t margin: 0px;
\t \t text-transform: uppercase;
\t \t line-height: 43px;
\t }<div class="sticky-container">
\t \t <ul class="sticky">
\t \t \t <li>
\t \t \t \t <img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
\t \t \t \t <p>Facebook</p>
\t \t \t </li>
\t \t \t <li>
\t \t \t \t <img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
\t \t \t \t <p>Twitter</p>
\t \t \t </li>
\t \t \t <li>
\t \t \t \t <img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
\t \t \t \t <p>Pinterest</p>
\t \t \t </li>
\t
\t \t
\t \t </ul>
\t </div>
\t <div class="sticky-container-first">
\t \t <ul class="sticky-first">
\t \t \t <li>
\t \t \t \t <img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
\t \t \t \t <p>Facebook</p>
\t \t \t </li>
\t \t \t <li>
\t \t \t \t <img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
\t \t \t \t <p>Twitter</p>
\t \t \t </li>
\t \t \t <li>
\t \t \t \t <img width="32" height="32" title="" alt="" src="http://new.praavahealth.com/public/images/icon/female.png" />
\t \t \t \t <p>Pinterest</p>
\t \t \t </li>
\t
\t \t
\t \t </ul>
\t </div>演示頁http://new.praavahealth.com/我需要滑動圖標的左側和右側都工作。請幫助我 感謝提前
嗨，謝謝。文本現在處於適當位置，但ul塊應該位於絕對左側，以便只有圖標可以在沒有懸停的情況下看到。 –