如何在鏈接前設置一些空格而不移動鏈接位置？

我需要先在鼠標上方的當前位置之前放置一個5像素的div。也就是說，如果用戶將指針放在它上面，那麼div將被高亮顯示5個像素，但不會更改其內容位置。如何在鏈接前設置一些空格而不移動鏈接位置？

.container { 
 
    width: 100%; 
 
    &:hover { 
 
    background-color: rgba(0, 0, 0, 0.1); 
 
    position: relative; 
 
    padding-left: 5px; 
 
    } 
 
}

<div class='container'> 
 
    <a href='#'>Click me!</a> 
 
</div>

在鼠標移到它突出但「點擊我！」消息向右移動5個像素。我怎樣才能做到這一點？

來源

2017-07-07 assembler

在容器上放置「padding-left：5px;」，而不僅僅是懸停。或者，如果這不是一個選項，嘗試在'：hover'上添加'margin-left：-5px'來補償。不是很清楚你想在這裏實現的目標。 – Santi

試試這個SCSS

.container { 
    width: 100%; 

    &:hover { 
    background-color: rgba(0, 0, 0, 0.1); 
    position: relative; 
    padding-left: 5px; 
    a{ 
    margin-left:-5px; 
    } 
    } 
}

Link for reference

希望這有助於..

來源

2017-07-07 13:46:45

真正有幫助！ thxs！ – assembler

add margin-left：-5px;您懸停類

.container { 
 
    width: 100%; 
 

 
    
 
} 
 
.container:hover { 
 
    background-color: rgba(0, 0, 0, 0.1); 
 
    position: relative; 
 
    margin-left:-5px; 
 
    }

<div class='container'> 
 
    <a href='#'>Click me!</a> 
 
</div>

來源

2017-07-07 13:42:38

它的工作原理，感謝您的建議 – assembler

不錯......標記爲正確的，如果它幫助你 –

我已經在此一展身手的它看起來很有趣。

移動元素5px的離開，同時用填充保護的內容（並添加5像素的寬度，以抵消移）

你應該有一些看起來像這樣：

.container:hover { 
    position:relative; 
    width:calc(100% + 5px); 
    left:-5px; 
    box-sizing:border-box; 
    padding-left:5px; 
}

Code pen here

來源

2017-07-07 13:50:17 hairmot

使用outline屬性。這實際上就是它的用途。它提高了可達性。欲瞭解更多信息，請參閱http://www.outlinenone.com

來源

2017-07-07 14:02:03

如何在鏈接前設置一些空格而不移動鏈接位置？

回答

相關問題