關於懸停設置更寬的絕對定位元素，但對面

我想有一個Bootstrap列外底部的Font Awesome圖標列表。目前我已經將它們定位在絕對位置，當我將鼠標懸停在更大寬度或更大的填充上時，該圖標將向左變大，而我希望它位於右側。關於懸停設置更寬的絕對定位元素，但對面

如何將它設置爲正確的，以及如何阻止第二個元素的反應？該功能不計劃:) 如果有人有一個更好的主意，如何設置它不同，我會很高興聽到。

ul { 
    position: absolute; 
    bottom: 60px; 
    right: -50px; 
    li { 
    a.btn { 
     width: 50px; 
     height: 46px; 
     display: block; 
     &:hover { 
     width: 100px; 
     padding-left: 50px; 
     } 
    } 
    } 
} 

<div class="col col-md-8"> 

    ... content ... 

    <ul class="share-buttons-outside list-unstyled"> 
    <li> 
     <a class="btn" href="#"> 
      <i class="fa fa-facebook" aria-hidden="true"></i> 
     </a> 
    </li> 
    ... 
</ul> 
</div>

來源

2016-09-14 Marko

而是相對定位右邊緣，左做位置：

ul { 
    left: 100%; 
    /* REMOVE right: -65px */ 
}

來源

2016-09-14 20:43:27 skobaljic

這工作，似乎最乾淨的解決方案，我是不敢用僅僅因爲完美的像素定位而無法定位但這清除了我的疑惑，謝謝:) – Marko

這是我的榮幸。 Nema na cemu，poz – skobaljic

你可以添加一個餘量，以正確放置：

ul li a.btn:hover { 
    width: 100px; 
    margin-right: -50px; 
    padding-left: 50px; 
}

這似乎糾正一個與其他也交互的問題。

工作codepen：http://codepen.io/sol_b/pen/xEVdgj

來源

2016-09-14 20:42:21 sol

你可以設置一個left值，而不是右：

ul { 
    position: absolute; 
    bottom: 60px; 
    left: 758; 
...

來源

2016-09-14 20:42:21

也許這個簡單的解決方案就夠了取而代之的

right: -50px;

做

left: 760px;

來源

2016-09-14 20:43:43 Flink

你可以使用你的li元素position: absolute;：

Codepen

li { 
    border: 0; 
    position: absolute; 
    left: -50px; 
    top: -46px; 
    &:nth-child(2) { 
     top: 0; 
    } 
}

來源

2016-09-14 20:44:03

關於懸停設置更寬的絕對定位元素，但對面

回答

相關問題