Divs向下移動時，填充擴展懸停

我有兩個div，當一個懸停在文本（這是鏈接）的div，填充從0增加到5px。我的問題是，只要我將鼠標懸停在文本上並且填充增加，div就會向下移動。下面的代碼：Divs向下移動時，填充擴展懸停

<div id="container" class="text1"> 
<a id="text1style" href="#" style="font-family:arial;font-size:120%; 
text-decoration:none;">Some text</a> 
</div> 

<div id="container" class="text2"> 
<a id="text2style" href="#" style="font-family:arial;font-size:120%; 
text-decoration:none;">text</a> 
</div> 


#container { 
position:relative; 
} 


a:link, a:visited, a:active { 
color:blue; 
} 


a:hover { 
color:yellow; 
} 


.text1box { 
left:200px; 
bottom:35px; 
width:243px; 
} 


#text1style { 
-webkit-transition:color 0.5s; 
-o-transition:color 0.5s; 
-moz-transition:color 0.5s; 
-ms-transition:color 0.5s; 
transition:color 0.5s; 
-webkit-transition:background-color 0.5s; 
-o-transition:background-color 0.5s; 
-moz-transition:background-color 0.5s; 
-ms-transition:background-color 0.5s; 
transition:background-color 0.5s; 
} 


#text1style:hover { 
padding:5px; 
border-radius:10px; 
background-color:red; 
} 


.text2 { 
left:455px; 
bottom:57px; 
width:90px; 
} 


#text2style { 
-webkit-transition:color 0.5s; 
-o-transition:color 0.5s; 
-moz-transition:color 0.5s; 
-ms-transition:color 0.5s; 
transition:color 0.5s; 
-webkit-transition:background-color 0.5s; 
-o-transition:background-color 0.5s; 
-moz-transition:background-color 0.5s; 
-ms-transition:background-color 0.5s; 
transition:background-color 0.5s; 
} 


#text2style:hover { 
padding:5px; 
border-radius:10px; 
background-color:red; 
}

更新代碼：我施加了填充擴展到各個環節，而不是股利，而這也幫助了。我仍然有兩個問題：（1）文本（鏈接）仍然稍微偏右。 2）當我移除鼠標時（例如：懸停結束），當背景（紅色）消失時，您可以看到文本丟失填充和邊框半徑。

我該如何解決這兩個問題？非常感謝。

來源

2016-11-07 H3ll0

一個ID只能使用一次，但可以通過做class =「class1name class2name」 – HarrisJT

@HarrisJT有多個類別請參閱更新的代碼以獲得替代解決方案。 – H3ll0

您可以通過向上移動2個盒子來補償填充物向下移動它們。

而id應該是唯一的

.container { 
 
    position: relative; 
 
    -webkit-transition: color 0.5s; 
 
    -o-transition: color 0.5s; 
 
    -moz-transition: color 0.5s; 
 
    -ms-transition: color 0.5s; 
 
    transition: color 0.5s; 
 
    -webkit-transition: background-color 0.5s; 
 
    -o-transition: background-color 0.5s; 
 
    -moz-transition: background-color 0.5s; 
 
    -ms-transition: background-color 0.5s; 
 
    transition: background-color 0.5s; 
 
    background-color: red; 
 
    text-align: center; 
 
} 
 
.box1 { 
 
    left: 200px; 
 
    /*bottom: 35px;*/ 
 
    width: 221px; 
 
    border-radius: 10px; 
 
} 
 
.box2 { 
 
    left: 455px; 
 
    /*bottom: 57px;*/ 
 
    width: 66px; 
 
    border-radius: 10px; 
 
} 
 
a:link, 
 
a:visited, 
 
a:active { 
 
    color: blue; 
 
} 
 
a:hover { 
 
    color: yellow; 
 
} 
 
.container:hover { 
 
    top: -5px; 
 
    padding: 5px 0; 
 
    background-color: dodgerblue; 
 
} 
 
.container.box1:hover + .box2 { 
 
    top: -10px; 
 
}

<div id="container1" class="container box1"> 
 
    <a href="#" style="font-size:120%; 
 
text-decoration:none;">Some text</a> 
 
</div> 
 

 
<div id="container2" class="container box2"> 
 
    <a href="#" style="font-size:120%; 
 
text-decoration:none;">text</a> 
 
</div>

基於問題的編輯，有2更新時間：第二樣品中，其中我添加padding: 0 5px到a:link規則，以彌補徘徊填充

#container1, #container2 { 
 
    position: relative; 
 
} 
 
a:link, 
 
a:visited, 
 
a:active { 
 
    color: blue; 
 
    padding: 0 5px; 
 
} 
 
a:hover { 
 
    color: yellow; 
 
} 
 
.text1box { 
 
    left: 200px; 
 
    bottom: 35px; 
 
    width: 243px; 
 
} 
 
#text1style { 
 
    -webkit-transition: color 0.5s; 
 
    -o-transition: color 0.5s; 
 
    -moz-transition: color 0.5s; 
 
    -ms-transition: color 0.5s; 
 
    transition: color 0.5s; 
 
    -webkit-transition: background-color 0.5s; 
 
    -o-transition: background-color 0.5s; 
 
    -moz-transition: background-color 0.5s; 
 
    -ms-transition: background-color 0.5s; 
 
    transition: background-color 0.5s; 
 
} 
 
#text1style:hover { 
 
    padding: 5px; 
 
    border-radius: 10px; 
 
    background-color: red; 
 
} 
 
.text2 { 
 
    left: 455px; 
 
    bottom: 57px; 
 
    width: 90px; 
 
} 
 
#text2style { 
 
    -webkit-transition: color 0.5s; 
 
    -o-transition: color 0.5s; 
 
    -moz-transition: color 0.5s; 
 
    -ms-transition: color 0.5s; 
 
    transition: color 0.5s; 
 
    -webkit-transition: background-color 0.5s; 
 
    -o-transition: background-color 0.5s; 
 
    -moz-transition: background-color 0.5s; 
 
    -ms-transition: background-color 0.5s; 
 
    transition: background-color 0.5s; 
 
} 
 
#text2style:hover { 
 
    padding: 5px; 
 
    border-radius: 10px; 
 
    background-color: red; 
 
}

<div id="container1" class="text1"> 
 
    <a id="text1style" href="#" style="font-family:arial;font-size:120%; 
 
text-decoration:none;">Some text</a> 
 
</div> 
 

 
<div id="container2" class="text2"> 
 
    <a id="text2style" href="#" style="font-family:arial;font-size:120%; 
 
text-decoration:none;">text</a> 
 
</div>

來源

2016-11-07 19:47:57 LGSon

所有這一切都是錯誤的我的鏈接。只要我懸停在它上面，它就會快速地跳起來。這兩個div彼此並排，並排排列。請再次查看我的代碼。 – H3ll0

@ H3ll0更新了我的答案。暫時放棄了「底部」，因爲它們會使演示中的框消失，但它仍然是「頂部：-5px」，它可以彌補懸停時添加的填充因素，因此不會向下移動 – LGSon

演示顯示文字向右移動。我希望文本完全居中，填充是唯一的擴展。請參閱我將在一分鐘內添加的更新代碼。 – H3ll0

我創建了一個對的jsfiddle你：

https://jsfiddle.net/squeLsa6/

<div id="" class="box1 container"> 
<a href="#" style="font-size:120%;text-decoration:none;">Some text</a> 
</div> 

<div id="" class="box2 container"> 
<a href="#" style="font-size:120%;text-decoration:none;">text</a> 
</div> 


<style type="text/css"> 
.container { 
position:relative; 
-webkit-transition:color 0.5s; 
-o-transition:color 0.5s; 
-moz-transition:color 0.5s; 
-ms-transition:color 0.5s; 
transition:color 0.5s; 
-webkit-transition:background-color 0.5s; 
-o-transition:background-color 0.5s; 
-moz-transition:background-color 0.5s; 
-ms-transition:background-color 0.5s; 
transition:background-color 0.5s; 
padding:5px; 
} 


a:link, a:visited, a:active { 
color:blue; 
padding:5px; 
} 


a:hover { 
color:yellow; 
padding:5px; 
} 


.box1 { 
left:200px; 
bottom:35px; 
width:221px; 
border-radius:10px; 
} 


.box2 { 
left:455px; 
bottom:57px; 
width:66px; 
border-radius:10px; 
} 


.container:hover { 

background-color:dodgerblue; 
} 
</style>

基本上我感動從懸停狀態填充到一個的和容器。我也將容器轉換爲類，因爲id應該是唯一的。我不確定你想如何工作，所以你可能需要玩一點，但這應該讓你開始。

來源

2016-11-07 19:49:22 raphael75

我將它應用於鏈接，但是現在它們每次懸停時都會向右移動。 – H3ll0

請參閱更新後的代碼 – H3ll0

首先，你把id與類混淆了。我使用CLASS更改了名稱ID，它起作用;在Css中，類有「。」並且ID有「＃」，請注意這一點。當我將鼠標懸停在div上時，需要5px的填充，並且很自然，其他div由於填充而輕微移動。如果您不想移動框，則必須在填充底部以外的任何位置填充填充。

來源

2016-11-07 20:01:49 lisarko8077

哪些ID可以用類替換？ – H3ll0

請參閱最新的代碼 – H3ll0

Divs向下移動時，填充擴展懸停

回答

相關問題