Question

可能重复：
CSS not modifying link properties

这段代码有什么问题？当我滚动导航时，一切都会弹出。另外，我不能将文本的颜色变为白色（当我滚动它时，它的白色，但当我退回时，它保持黑色。另外，检查我的页面底部，两列都搞砸了......两者都应该是相等的宽度和长度，应该坐在彼此旁边。感谢您的帮助。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en">
 <head>
<style type="text/css">
    body html {
    margin:0;
    padding:0;
    color:#101010;
    font-family: helvetica;


}

p {
    margin:10px 0 0 20px;
    font-size: 13px;
    line-height: 1.3em;
    padding-bottom: 10px;

}

p a{
    text-decoration: none;
    color: #4e6f8c;

}


#wrapper {
    width:960px;
    margin:0 auto;
    padding: 0px;
    background:#fff;
}

#header {
    padding:5px 10px;
    background:#fff;
    height:518px;


}

#nav {
    padding:5px 10px;
    background:#fff;
    width: 960px;
    height: 35px;
    position: absolute;
    top: 370px;
    font-size: 18px;
    color: #000;
}
#nav ul {
    margin:0;
    padding:0;
    list-style:none;
    position: absolute;
    bottom: 5px;
}
#nav li {
    display:inline;
    margin:0;
    padding:0;
    width:160px;
    float:left;
}


#nav li:hover {
    background-color: #24389b;
    height: 25px;


}

#nav a {

    color: #fff;
    text-decoration: none;
}


#nav a:link {
    color: #000;
    text-decoration: none;


}

#nav a:visited{
    color: #ffffff;
    text-decoration: none;


}


#nav a:hover {
    color: #ffffff;
    text-decoration: none;



}

    #nav a:focus {
    color: #ffffff;
    text-decoration: none;

}



#nav a:active {
    color: #ffffff;
    text-decoration: none;

}

#topcontent p
{
    color: #444444;

}


}
#leftcontent {
    float:left;
    width:480px;
    height: 1%;
    background:#fff;
}
h2 {
    margin:10px 0 0 20px;
    color: #24389b;
    font-size: 19px;
    padding-bottom: 8px;
}
#rightcontent {
    float:right;
    width:480px;
    background:#fff;
    height: 1%;
}
#footer {
    clear:both;
    padding:5px 10px;
    background:#fff;
}
#footer p {
    margin:0;
}
* html #footer {
    height:1px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><img src="pold.png" alt="Pold Logo" /></div>
<div id="nav">
    <ul>
        <li><a href="Research">Research</a></li>
        <li><a href="Research">Publications</a></li>
        <li><a href="Research">Software</a></li>
        <li><a href="Research">People</a></li>
        <li><a href="Research">Volunteer</a></li>
        <li><a href="Research">Resources</a></li>
    </ul>
</div>
<div id="topcontent">
    <p>The interests of our lab are generally centered around the study of learning and memory, decision making, and executive control.  Much of our work is focused on basic cognitive and neural mechanism, but we are also heavily involved in translational research not the mechanisms of neuropsychiatric disorders.  </p>

</div>
<div id="leftcontent">
    <h2>Funded Projects</h2>
        <p><a href="url">The Cognitive Atlas</a><br />(funded by NIMH RO1MH0822795)<br />The Cognitive Atlas project aims to develop anontology for cognitive processes through social <br />collaborative knowledge building.</p>

</div>
<div id="rightcontent">
    <h2>Center Grants</h2>
    <p><a href="url">Consortium for Neuropsychiatric Phenomics</a><br />(funded by NIH, PI: R. Bilder)<br />This Roadmap Interdisciplinary Research Consortium is leveraging the new discipline of phonemics to understand neuropsychiatric disorders at multiple levels, from genes to neural systems to </p>

</div>
<div id="footer">
</div>
</div>
</body>
</html>

Answer 1

所有内容都会弹出，因为您在悬停属性中有高度声明，但没有原始li定义：

#nav li:hover {
  background-color: #24389b;
  height: 25px;
}

列的问题几乎可以肯定，因为你左边是向左浮动而右边是向右浮动 - 据我所知，如果你将它们设置为向左浮动它可能效果最好（有很多关于2列液体CSS设计的教程;你应该能够根据你的需要调整一个）

我同意@Joseph的链接颜色问题 - 这很容易修复。

Answer 2

很难说出发生了什么...特别是没有看到某种类型的演示，但就你的悬停文字问题而言，你有以下几点：

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

问题是当您将鼠标悬停在链接上时，您不希望它更改文本。当你将鼠标悬停在你的其他规则上时，你希望它改变颜色。因此，它应该是这样的：

#nav li:hover a {
    color: #ffffff;
    text-decoration: none;
}

就像我说的那样，对于其他的东西你应该提供一些我们可以使用的演示（并且它可能不是一个坏主意，使它成为另一个问题。）

修改

在看到sg3s的评论之后，我回过头来看看是否有更兼容的方式......还有！

#nav a {
    color: white;
    text-decoration: none;
    display:block;
}

主要得到它......但它并不完美。

这个CSS / HTML代码有什么问题？

2 个答案:

修改