样式链接中的文本

我无法编辑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

样式链接中的文本

回答

相关问题