Question

我正在建立一个网站。好极了！是的。我在右上角有一个导航栏，但是当我尝试将鼠标悬停在它上面时，悬停不起作用，只有当我将鼠标悬停在某个部分时：才会在单词的顶部。其余的链接工作。这是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;
}

Answer 1

我从你的代码中做了一些小提示（有一些修正）：https://jsfiddle.net/wka034en/1/

问题是，您的H1标题与导航重叠。

只需添加：

.header ul li a {
    /* ... */
    z-index: 10;
}

...使用您的代码解决您的问题：https://jsfiddle.net/wka034en/2/

但同样，它远离良好做法。为什么要单独定位每个导航链接？您可以改为定位整个列表：https://jsfiddle.net/wka034en/3/

.header ul {
    list-style-type: none;
    position: fixed;
    right: 10px;
    top: 10px;
    z-index: 10;
}
.header ul li {
    display: inline-block;
    margin: 0 8px;
}
.header ul li a {
    color: white;
    font-weight: bold;
}

大多数浏览器都有开发人员工具 - 或者您可以安装Firebug等附加组件。按F12或通过菜单可以激活这些工具。在少数浏览器（如Safari）中，您需要首先在设置中启用开发人员模式您可以右键单击元素并从上下文菜单中选择“inspect”之类的内容，以便跳转到开发人员窗口中正确的DOM位置。
使用那些你可以很快自己快速确定原因的根源。

关于水平滚动条的其他问题：

这是因为您的H1默认为block类型。你将它相对移动距离左侧10px。因此，您的整个内容占据了100％宽度加上10px。这就是需要滚动条的原因。你可以在身上使用overflow-x:hidden，或者只是避免这种相对定位这种元素的不良做法只需使用边距和填充。

将CSS更改为：

h1 {
    /* ... */
    padding-left: 10px;    /* was: 'left: 10px;' */
    /* ... */
}

请参阅：https://jsfiddle.net/Ldcjmkn8/

如需进一步指导，建议您阅读有关重置CSS的信息：http://cssreset.com/

HTML和CSS麻烦与悬停

1 个答案: