【发布时间】：2016-07-04 17:43:43
【问题描述】：
我正在做一个网站。耶！嗯是的。我在右上角有一个导航栏，但是当我尝试将鼠标悬停在它上面时，悬停不起作用，只有当我将鼠标悬停在某个部分时：就在单词的顶部。其余的链接虽然有效。 这是HTML：
<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="blog.css">
<link rel="icon" href="http://images4.fanpop.com/image/photos/22600000/Smiley-Face-smiley-faces-22608094-1000-1000.png">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.mmenu.js"></script>
<script type="text/javascript" src="app.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="jquery.mmenu.css" />
</head>
<body>
<div class="header">
<div class="navbar">
<ul>
<li><a id="strawpoll" href="#"> Strawpoll </a></li>
<li><a id="previousblogs" href="#"> Previous Blogs </a></li>
<li><a id="aboutme" href="#"> About Me </a></li>
</ul>
</div>
<h1><a href="#">My Life</a></h1>
</div>
<div>
<h2>Recent Blogs</h2>
<h3><a href="#">Week 1</a></h3>
<a href="file:///E:/Week%201/week%201.html"><img style='border:5px solid #FFFFFF' width="400" height="300" src="http://wallpapercave.com/wp/YQ9Usfh.jpg"></a>
<h4>Short Description................................................................................................</h4>
<h3><a href="#">Week 2</a></h3>
<img style='border:5px solid #FFFFFF' width="400" height="300" src="http://wallpoper.com/images/00/17/67/51/anime-forest_00176751.jpg">
<h4>Short Description................................................................................................</h4>
<h3><a href="#">Week 3</a></h3>
<img style='border:5px solid #FFFFFF' width="400" height="300" src="http://wallpapercave.com/wp/WWFeR4k.jpg">
<h4>Short Description................................................................................................</h4>
</div>
<footer class="container">
<div class="pictures" >
<a href="https://twitter.com/"><img width="30" src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/twitter.svg"></a>
<a href="https://www.facebook.com/"><img width="30" src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/facebook.svg"></a>
<a href="https://www.instagram.com/"><img width="30" src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/instagram.svg"></a>
</div>
</footer>
</body>
</html>
这是 CSS：
#navbar ul li a:hover {
text-decoration: underline;
}
.header {
position: fixed;
top: -20px;
left: 0px;
width: 100%;
background: #000000;
border-left: 5px solid white;
}
.header ul {
list-style-type: none;
}
.header ul li a {
color: white;
position: fixed;
top: 13px;
font-weight: bold;
}
.header ul li a:hover {
color: royal-blue;
}
a#strawpoll {
right: 215px;
}
a#previousblogs {
right: 95px;
}
a#aboutme {
right: 15px;
}
h1 {
text-align: left;
position: relative;
left: 10px;
top: 15px;
color: white;
}
body {
position: relative;
top: 60px;
font-family: 'Raleway', sans-serif;
background-image: url('https://cms-images.idgesg.net/images/article/2015/11/black-100630491-orig.jpg');
background-size: cover;
color: white;
text-align: center;
}
a:link {
color: white;
text-decoration: none;
}
.header a:hover {
text-decoration: underline;
}
a:visited {
color: white;
text-decoration: none;
}
h3 a:hover {
text-decoration: underline;
}
div .pictures {
position: relative;
left: 610px;
top: 40px;
}
【问题讨论】：
-
又是什么“测试”墙……？是否只是为了绕过 more-text-need-for-this-much-code 过滤器？
-
哇，学习更好地格式化问题
-
作为建议，我可以在您的 CSS 中看到您使用链接选择器作为示例，如下所示：
a#divid。不要在选择器的开头包含a，只写id。 -
通常，代码本身很好，但上下文错误。发布指向您的网站草稿的链接或在 jsfiddle 等在线工具中重新创建问题（谷歌它！）。如果到那时，您还没有自己解决问题，请回来，发布问题，定义预期和实际行为并向我们展示您的尝试。