CSSinherit填充，然後減少數字

我有一個類被添加到網站的各個部分，以顯示一個部分是可編輯的。該類被命名爲.editableCSSinherit填充，然後減少數字

當用戶登錄時，當他們將鼠標懸停在該部分上時，該部分周圍會顯示紅色虛線邊框。

我做到這一點目前像這樣：

.editable { /* add padding to act as clear border */ 
    padding:1px; 
} 
.editable:hover { /* remove padding and add border */ 
    padding:0px; 
    border:1px dashed red 
}

正如在評論中表示，我添加了一個1px的填充，所以當邊框顯示懸停，本節沒有「移動」。

當要編輯的部分已經有填充時會出現問題。例如

.sectionToBeEdited { 
    padding:10px; 
}

當我添加.editable類<div class="sectionToBeEdited editable">blah</div>填充被覆蓋。

問題有沒有辦法繼承填充設置，然後將1px添加到它？然後在懸停減少1px的填充。

我知道另一種方法做到這一點是將可編輯的部分包裝在單獨的div中，並在其中應用填充，但涉及重寫和添加大量的類和div。

或者還有另一種方法來做到這一點？

來源

2013-04-18 Darren Sweeney

CSS只能覆蓋它的值，不支持數學運算。

您或許可以通過爲您的editable類使用白色/透明邊框而不是填充來解決您的問題。

.editable { /* change border color to something invisible */ 
    border:1px solid white; 
} 
.editable:hover { /* make border visible */ 
    border:1px dashed red; 
}

來源

2013-04-18 07:50:28

你可以有計算數學運算（）。但這在這裏沒有幫助。 – dave

這顯然只適用於白色背景（或任何其他純色，如果你改變它），這對我不起作用不幸的是 –

它可能：http://www.researchkitchen.de/blog/archives/css-bordercolor- transparent.php –

依靠瀏覽器的支持也有一些可供選擇：

有transparent邊界，只是改變顏色，red懸停
使用大綱邊框outline: 1px dashed red;也不會影響箱尺寸
加上margin: -1px; border: 1px dashed red;懸停，這樣盒子四面都會拉伸1px

來源

2013-04-18 08:25:28

這是我去：

.editable { 
    border: 1px dashed rgba(255, 0, 0, 0); 
} 
.editable:hover { 
    border: 1px dashed rgba(255, 0, 0, 1); 
}

邊框的透明度爲0和1懸停

來源

2013-04-18 10:01:57

您是否嘗試過'border：1px solid transparent;'爲默認狀態？ –

@AndreyKuzmin是的，我也知道，如果我選擇在0.8的懸停狀態下顯示它，這可以提供更多的控制 - 但是，第一行可能是透明的 –

CSSinherit填充，然後減少數字

回答

相關問題