2016-11-07 23 views
0

我有兩個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)當我移除鼠標時(例如:懸停結束),當背景(紅色)消失時,您可以看到文本丟失填充和邊框半徑。

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

+1

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

+0

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

回答

0

您可以通過向上移動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 5pxa: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>

+0

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

+0

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

+0

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

0

我創建了一個對的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應該是唯一的。我不確定你想如何工作,所以你可能需要玩一點,但這應該讓你開始。

+0

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

+0

請參閱更新後的代碼 – H3ll0

0

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

+0

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

+0

請參閱最新的代碼 – H3ll0