Question

我在编辑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/

Answer 1

要在悬停时更改链接的颜色吗？

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

要更改悬停时的颜色背景（链接）：

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

更改背景颜色（整个div）

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

Answer 2

#footer_subscribe:hover
{
    background:Red;
}

Answer 3

要更改颜色，请将其添加到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;
}

Answer 4

在父div中使用display:table;并在链接

中使用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

希望这适合你。

Answer 5

#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

样式链接文本在div中

5 个答案: