樣式鏈接中的文本

我無法編輯div中的鏈接。我希望鏈接文本在黑色div內垂直居中。我還希望盒子背景在懸停時變成紅色...... 非常感謝您的幫助！樣式鏈接中的文本

HTML：

<div id="footer_subscribe"> 
<input type="text" class="subscribe" value="Email Address" /> 
<a href="#" class="footer_social">Subscribe</a> 
</div> 
<div id="footer_facebook"> 
<img src="http://s26.postimg.org/q5tytjx2t/nav_facebook.jpg" /> 
<a href="#" class="footer_social">Become a Fan</a> 
</div> 
<div id="footer_youtube"> 
<img src="http://s26.postimg.org/rywvhvi9h/nav_youtube.jpg" /> 
<a href="#" class="footer_social">Watch Us</a> 
</div>

CSS：

#footer_subscribe { 
background:#000; 
width:305px; 
height:35px; 
float:left; 
padding:0; 
} 
input.subscribe { 
border:2px solid black; 
margin:2px; 
width:200px; 
height:24px; 
} 
#footer_facebook { 
background:#000; 
width:155px; 
height:35px; 
float:left; 
padding:0; 
margin-left:5px; 
} 
#facebook_logo { 
width:32px; 
height:32px; 
} 
a.footer_social { 
font-family:Arial, Helvetica, sans-serif; 
font-size:1em; 
/* 14px/16=0.875em */ 
font-style:normal; 
text-decoration:none; 
color:#FFF; 
} 
a:link.footer_social { 
font-family:Arial, Helvetica, sans-serif; 
font-size:1em; 
/* 14px/16=0.875em */ 
font-style:normal; 
text-decoration:none; 
color:#FFF; 
} 
a:link.visited.footer_social { 
color:#FFF; 
} 
a:link.hover.footer_social { 
color:#F00; 
}

http://jsfiddle.net/4os21tzf/

來源

2014-08-30 Rabbid

#footer_subscribe { 
    background:#000; 
    width:305px; 
    height:35px; 
    float:left; 
    padding:0; 
    line-height: 33px; 
} 
#footer_subscribe:hover { 
    background:red; 
} 
#footer_facebook { 
    background: none repeat scroll 0% 0% #000; 
    width: 155px; 
    float: left; 
    padding: 0px; 
    margin-left: 5px; 
    line-height: 35px; 
    height: 35px; 

} 
#footer_facebook:hover { 
    background:red; 
} 
a.footer_social:link { 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: 1em; 
    font-style: normal; 
    text-decoration: none; 
    color: #FFF; 
    vertical-align: top; 
    padding-top: 10px; 
} 
a.footer_social:hover{ 
    color: red; 
}

JSFIDDLE DEMO

來源

2014-08-30 11:04:02 Farshad

感謝這麼多的幫助！ :-)開車讓我瘋狂 – Rabbid 2014-08-30 11:22:49

不客氣@ user2220758 – Farshad 2014-08-30 11:35:32

要更改懸停在鏈接的顏色？

a.footer_social:hover{ 
    color:#F00; 
}

要改變懸停顏色背景（鏈接）：

a.footer_social:hover{ 
    color:#000000; 
    background-color:red; 
}

改變背景顏色（整個DIV）

#footer_facebook:hover{ 
    background-color:red; 
}

來源

2014-08-30 10:56:11 jagmitg

#footer_subscribe:hover 
{ 
    background:Red; 
}

來源

2014-08-30 10:58:50

變色添加此到您的CSS：

#footer_subscribe:hover 
{ 
background-color:red; 
} 
#footer_facebook:hover 
{ 
background-color:red; 
}

對於文本對齊方式：

a:link.footer_social { 

font-family:Arial, Helvetica, sans-serif; 

font-size:1em; 

/* 14px/16=0.875em */ 

font-style:normal; 

text-decoration:none; 

color:#FFF; 

vertical-align: top; 
}

來源

2014-08-30 10:59:05

使用display:table;在父母的div和使用display: table-cell; vertical-align: middle;鏈路

#footer_subscribe { 
    display:table; 
} 

a.footer_social:link{ 
    display: table-cell; 
    vertical-align: middle; 
} 

#footer_subscribe:hover{ 
    background-color:red; 
}

working jsFiddle Link

希望這對你的作品。

來源

2014-08-30 10:59:44

樣式鏈接中的文本

回答

相關問題