CSS懸停使其他元素移動

我想在懸停時增加邊框。但它確實會影響其他所有元素的定位。CSS懸停使其他元素移動

.nicePeopleItem { 
 
    display:inline-block; 
 
} 
 
.nicePeopleItem img{ 
 
    border-radius:48px; 
 
    border: 4px solid #D568A8; 
 
    padding: 2px; \t 
 
    transition-duration:0.3s; \t 
 
    cursor:pointer; 
 
} 
 
.nicePeopleItem img:hover{ 
 
    border: 10px solid #D568A8; 
 
    transition-duration:0.3s; 
 
}

<div class="carrousel"> 
 
    <div class="nicePeopleItem"> 
 
    <img src="http://placehold.it/48x48"> 
 
    </div> 
 
    <div class="nicePeopleItem"> 
 
    <img src="http://placehold.it/48x48"> 
 
    </div> 
 
    <div class="nicePeopleItem"> 
 
    <img src="http://placehold.it/48x48"> 
 
    </div> 
 
    <div class="nicePeopleItem"> 
 
    <img src="http://placehold.it/48x48"> 
 
    </div> 
 
</div>

我嘗試添加一些利潤，填充，一些絕對定位沒有成功。

來源

2016-03-18 yarek

你可以用box-shadow，例如更換border

border: 10px solid #D568A8;

應該成爲

box-shadow: 0 0 0 10px #D568A8;

僅增加該屬性的元素的計算寬度/高度將不會改變（因爲沒有幾何變化），所以這不會影響位置的相鄰靜態圖像將被box-shadow部分重疊。

Codepen Demo

注：如果你不想在hover狀態的重疊，只是增加元素之間的空白。

來源

2016-03-18 09:20:59 fcalderan

我可以在懸停時看到邊框和陰影之間非常薄的白色圓圈。我們也可以在正常狀態下將邊框改爲方塊陰影以將其刪除。 –

你可以在開始時增加額外的邊距來補償盒子陰影的寬度。這將避免重疊:) – Harry

當然，但對我而言，不清楚是否需要重疊，因爲原始問題是關於如何在不改變其他元素的位置的情況下更改邊框寬度。我會做一個編輯 – fcalderan

這是因爲元素有display: inline-block。這意味着默認情況下所有元素都將與基線對齊，並且一個元素變大（由於邊框變粗），它會向下推動其他元素。

您可以將vertical-align: top;添加到元素中，使它們全部對齊頂部而不是基線，這樣可以防止其他元素被壓低。請注意，由於正在徘徊的那個邊框的邊框增加，因此正在徘徊的元素仍然會被推到右側。（如果你想也避免了這種情況的發生，然後使用陰影，而不是邊境像fcalderan's answer提到會更好。）

.nicePeopleItem { 
 
    display: inline-block; 
 
} 
 
.nicePeopleItem img { 
 
    border-radius: 48px; 
 
    border: 4px solid #D568A8; 
 
    padding: 2px; 
 
    transition-duration: 0.3s; 
 
    cursor: pointer; 
 
    vertical-align: top; 
 
} 
 
.nicePeopleItem img:hover { 
 
    border: 10px solid #D568A8; 
 
    transition-duration: 0.3s; 
 
}

<div class="carrousel"> 
 
    <div class="nicePeopleItem"> 
 
    <img src="http://placehold.it/48x48"> 
 
    </div> 
 
    <div class="nicePeopleItem"> 
 
    <img src="http://placehold.it/48x48"> 
 
    </div> 
 
    <div class="nicePeopleItem"> 
 
    <img src="http://placehold.it/48x48"> 
 
    </div> 
 
    <div class="nicePeopleItem"> 
 
    <img src="http://placehold.it/48x48"> 
 
    </div> 
 
</div>

來源

2016-03-18 09:20:44 Harry

您可以向懸停中添加負邊距以補償邊界寬度增長。

只需添加：margin：-6px;

.nicePeopleItem img:hover 
{ 
    border: 10px solid #D568A8; 
    transition-duration:0.3s; 
    margin:-6px; 
}

Fiddle

它不與過渡雖然發揮得很好。沒有過渡，這完美地工作。

來源

2016-03-18 09:26:24 Goombah

這使得元素搖！ – yarek

CSS懸停使其他元素移動

回答

相關問題