CSS链接悬停样式

Question

CSS链接悬停样式

3

我正在设计一个网页，其中有一个带链接的菜单栏。我已经为它准备好了样式表，但是我在“悬停”代码方面遇到了困难。我的一段代码如下：

<body>
<div id="wrapper">
    <div id="menu">
        <a class="mLink" href="main.php">Home</a>

使用以下css代码：

body {
background-color:black;
text-align: center;
height:100%;
}

div#wrapper{
margin-right: 5%;
margin-left: 5%;
margin-top: 0%;
margin-bottom: 5%;
border: outset;
border-color: white;
}

a.mLink{
color: white;
font-size: 35px;
padding: 10px;
}

a.mLink:hover{ 
color: black;
}

a.mLink:active{
color:black;
}


div#content{
color: white;
font-size: 40px;
}

“悬停”和“活动”都没有起作用，我不明白为什么。我尝试了很多不同的样式变化，比如a:hover、#menu a:hover、#menu a.mLink:hover等等，但似乎没有任何效果。非常感谢您的帮助。

- Ryan Sayles

2

“不起作用” 是指什么？那些状态下颜色没有改变吗？它停留在什么颜色？ - Evan Mulawski

应该可以工作，尝试只输入a:hover，并告诉我是否有效。 - Martin Risell Lilja

默认情况下它是白色的，我希望当鼠标悬停时它可以改变成其他颜色，并且在活动状态下可以改变成另一种颜色（目前为测试目的，我将悬停和活动状态设置为黑色），但链接并没有改变颜色。同时，a:hover也不起作用。 - Ryan Sayles

2个回答

0

这可能听起来很蠢，但清除缓存。它可能正在加载您以前的版本或其他内容。另外，使用的是什么网络浏览器？是否有任何可能动态更改/添加类的JS代码。

- Drakkainen

你如何清除缓存？我正在使用Chrome，没有JS代码。 - Ryan Sayles

@rsay3 只需按照以下指南即可： http://support.google.com/chrome/bin/answer.py?hl=zh-CN&answer=95582 - Drakkainen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ben · Accepted Answer

也许您可以包含一张屏幕截图，告诉我们它应该是什么样子？我将您提供的内容复制并粘贴到jsfiddle中，对我来说一切都很正常。您发布的内容与我所做的唯一区别是将a:hover颜色更改为红色，将a:active更改为黄色，这样您就可以看到不同之处，而不是黑色和黑色重叠。

那么您能否发布正在发生的情况与您期望的情况的屏幕截图？如果可以，我会相应更新我的答案。