将鼠标悬停在文本上更改字体颜色

问题描述：

我对css不太了解，但是我被卡住了。我想在悬停时将字体的颜色更改为淡蓝色。但是，我希望默认颜色是白色的......我该怎么做？我所现在，已经改变了默认的文本紫..并强调：S它确实改变字体为蓝色，虽然，在悬停..将鼠标悬停在文本上更改字体颜色

代码：

CSS：

a:hover 
{ 
    text-decoration:none; 
    color: #B9D3EE; 
} 

.navigationBar 
{ 

    background: gray; 
    height: 50px; 
    width: 100%; 
} 
.menuOption 
{ 
    width:143px; 
    text-align: center; 
    position: static; 
    float:left; 

} 
#search 
{ 
    position:relative; 
    font-weight: bold; 
    color: white; 
    height: 27px; 
    margin-left: 23px; 
    left: 133px; 
    top: -17px; 
    margin-top: 1px; 
} 
#reports 
{ 
    position:relative; 
    font-weight: bold; 
    color: white; 
    height: 27px; 
    margin-left: 23px; 
    left: 34px; 
    top: -16px; 
    margin-top: 1px; 
} 
#addProject 
{ 
    position:relative; 
    font-weight: bold; 
    color: #B9D3EE; 
    height: 27px; 
    margin-left: 23px; 
    left: -542px; 
    top: -18px; 
    margin-top: 1px; 
} 
#editProject 
{ 
    position:relative; 
    font-weight: bold; 
    color: white; 
    height: 27px; 
    margin-left: 23px; 
    left: -611px; 
    top: -18px; 
    margin-top: 1px; 
} 
#more 
{ 
    position:relative; 
    font-weight: bold; 
    color: white; 
    height: 27px; 
    margin-left: 23px; 
    left: -66px; 
    top: -15px; 
    margin-top: 1px; 
}

HTML：

<div class = "navigationBar"> 

      <asp:ImageButton ID="ImageButton1" runat="server" Height="18px" 
       ImageUrl="~/g.png" style="margin-left: 1012px; margin-top: 18px" 
       Width="23px" /> 

      <div id = "search" class = "menuOption" > 
      <a href=""> Search </a> 
      </div> 

      <div id = "reports" class = "menuOption" > 
      <a href=""> Reports </a> 
      </div> 

      <div id = "more" class = "menuOption" > 
      <a href=""> More... </a> 
      </div> 

      <div id = "addProject" class = "menuOption" > 
      <a href=""> Add Project </a> 
      </div> 


      <div id = "editProject" class = "menuOption" > 
      <a href=""> Edit Project </a> 
      </div> 

</div>

答

a:link 
{ 
text-decoration:none; 
color: #B9D3EE; 
} 
a:visited 
{ 
text-decoration:none; 
color: #B9D3EE; 
} 
a:hover 
{ 
text-decoration:none; 
color: #B9D3EE; 
} 
a:active 
{ 
text-decoration:none; 
color: #B9D3EE; 
}

另外，这里是一个关于伪代码的参考，它应该为您解决这个问题。

http://www.w3schools.com/css/css_pseudo_classes.asp

好感谢，认为工程...但只是出于好奇......哪里它得到紫色下划线字体颜色/风格？ .. – BigBug 2012-03-22 16:44:21

默认情况下紫色是'visited'链接。我再次编辑我的答案，以显示所有4个psuedo元素。更改每种颜色以查看其效果。 – 2012-03-22 16:45:24

嗯......但紫色是在任何事物被点击之前发生的......？我也没有任何“访问”的代码在我的CSS ...谢谢你的反应的方式:) – BigBug 2012-03-22 16:46:39

答

类似@Brett等待，但更简洁

a{ 
    text-decoration:none; 
    color:#FFF; 
} 

a:hover 
{ 
    text-decoration:none; 
    color: #B9D3EE; 
}

它之所以是紫色，是因为默认情况下的超链接是蓝色的，但去的时候他们，然后变成紫色。在你的情况下，“”的网址基本上就是当前页面，这个网页很好。 :)

编辑删除不需要的伪类：H/T @yunzen

你只需要'a'。它有所有的伪类。例如，如果您只选择“a：hover”或“a：link”，则访问只会被忽略 – HerrSerker 2012-03-22 17:05:05

将鼠标悬停在文本上更改字体颜色

相关推荐