:hover 期间颜色不变答案

【问题标题】：Color not changing during :hover:hover 期间颜色不变
【发布时间】：2012-08-05 01:42:36
【问题描述】：

当我悬停时颜色不会改变。我不明白有什么问题！我尝试将悬停代码更改为下划线并且它有效。它只是不适用于颜色。我也不认为它是页面的主要 css，因为链接颜色更改在其他链接中可以正常工作。

CSS：

.cssmenu{
    border:0px;
    padding:0px;
    font-size:16px;
    font-weight:bold;
    position:absolute;
    top: 7px;
    width:100%;
}
.cssmenu ul{
    position:relative;
    left: 50%;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    text-align: right;
}
.cssmenu li{
    float:left;
    padding:0px;
    }
.cssmenu li a{
    font-weight:normal;
    line-height:35px;
    text-decoration:none;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    font-size: 18px;
    transition:color 0.5s;
    -moz-transition:color 0.5s; /* Firefox 4 */
    -webkit-transition:color 0.5s; /* Safari and Chrome */
    -o-transition:color 0.5s; /* Opera */
    }
.cssmenu li a:hover {
    color:#39F;
    }

HTML：

<div class="cssmenu">
<ul>
   <li><a href='index.html'><span>Home</span></a></li>
   <li><a href='about.html'><span>About</span></a></li>
   <li><a href='products.html'><span>Products</span></a></li>
   <li><a href='contact.html'><span>Contact Us</span></a></li>
</ul>
</div>

【问题讨论】：

jsfiddle.net/thundercracker/4Q8qu 在谷歌浏览器中运行良好。我认为您的颜色变化并不明显，并且显示器上的颜色设置可能使其无法区分。尝试过不同的颜色，比如红色？
jsfiddle.net/thundercracker/4Q8qu/2，再次，（测试所有浏览器），链接明显过渡到白色，消失。我认为您选择过渡到的颜色与原始颜色太接近了。

标签： html css colors hover

【解决方案1】：

感谢大家的帮助。我意识到这是因为我将网页中的所有文字都更改为白色。我不知道为什么这会阻止链接改变颜色，但至少我的问题解决了。

【讨论】：

【解决方案2】：

.cssmenu li a{}

在这个类中没有定义颜色属性，所以可能只是因为其他一些类的颜色 a 和 a:hover 是相似的。因此，如果您想使用颜色过渡，请为 a 和 a:hover 选择两种不同的颜色

【讨论】：

【解决方案3】：

如 cmets 所述，颜色与原始颜色太接近。

如果你想要那种特定的颜色，你可以让字体加粗，或者增加字体的大小。您还可以添加背景。

http://jsfiddle.net/thundercracker/4Q8qu/5/

编辑：还有一件事，由于淡入淡出过渡，颜色的变化甚至比平时更不明显。人类被设计为捕捉对比和快速变化。如果你想让它引人注目，你想增加对比度。动画的速度，使颜色差异更大，或者添加另一种效果，例如当有人悬停时出现的下划线或背景。

【讨论】：

【解决方案4】：

同意格雷格。适用于 Safari、FF 和 chrome。代码看起来不错。问题可能与颜色选择有关。还打开 FF 并使用 Firebug 检查悬停是否以您知道的方式应用。由于这是一个 sn-p 代码，您可能有另一个 css 规则冲突。

【讨论】：