当我将鼠标移到标题链接上时，不需要的下划线会显示在标题的链接上

在我的网站上，我的标题被链接回自身并且工作正常，但是当我将鼠标放在它上面时，它下面会出现一个不需要的下划线，我不希望这样。我已经将标题的文本装饰设置为无，所以我不确定如何解决这个问题。我的代码如下。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <style>
        body {
            margin: 0;
        }
        .Header {
            position: fixed;
            z-index:1;
            width: 100%;
            height: 70px;
            background-color: black;
            text-align: right;
        }
        .socialmedia {
            position: fixed;
            right: 100px;
            top: 35px;
            transform: translate(0, -50%);
            display: flex;
            /* add this */
            align-items: center;
            /* add this */
        }
        .preorder button {
            background-color: white;
            border: 0;
            height: 35px;
            width: 110px;
            margin-left: 35px;
        }
        .footer {
            display: flex;
            align-items: center;
            width: 100%;
            height: 90px;
            background-color: black;
        }
        .img-fluid{
            width: inherit;
            height: 782px;
        }
        .mySlides~.mySlides {
            position: absolute;
            top: 0;
            left: 100%;
            transition: 0.7s;
        }
    </style>
</head>
<body>
<div class="Header" id="myHeader">
    <a class = "headerLogo">
        <a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
        text-align: center; padding-top: 20px">Lunation Boards</h1></a>
        <style>
            a{text-decoration: none}
        </style>
    </a>
    <div class="socialmedia">
        <a class = "Facebook">
            <a href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
        </a>
        <a class = "Instagram">
            <a href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png"  width="50px" height="50px"></a>
        </a>
        <a class = "Youtube">
            <a href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
        </a>
        <a class = preorder>
            <button style = "background-color: white;">Pre-Order</button>
        </a>
    </div>
</div>

检查锚文本装饰是否位于 a：hover 中，因此添加

a:hover{
text-decoration:none;
}

可能有一个专门用于悬停的 CSS。 try： a:hover {text-decoration:none;} <</p>

div class="one_answers">

这个CSS是创建下划线的原因，它来自引导

程序

a:focus, a:hover {
    color: #014c8c;
    text-decoration: underline;
}

您可以通过将其添加到CSS中来覆盖它

.Header a:hover, .Header a:focus {
  text-decoration: none;
}

你需要把你的CSS样式放在HTML之前。最好的地方是在HTML顶部的一个样式块内。您的样式标签目前位于链接下方，这就是未应用的原因。

您可以通过专门设置:hover状态的样式来删除悬停时的下划线。但是请注意，它对于可访问性并不理想。

你的HTML和CSS几乎没有其他问题。最佳做法是避免在 HTML 标记中使用内联样式。并且您已使用file://协议链接到主页，请使用http://因为它是一个网页。如果您要链接到默认主页，那么您也可以执行/Home.html。

您还缺少结束</body></html>标记。

我也在下面修复了这些问题。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <style>
        body { margin:0 }
        .Header {
            position: fixed;
            z-index:1;
            width: 100%;
            height: 70px;
            background-color: black;
            text-align: right;
        }
        .socialmedia {
            position: fixed;
            right: 100px;
            top: 35px;
            transform: translate(0, -50%);
            display: flex;
            /* add this */
            align-items: center;
            /* add this */
        }
        .preorder button {
            background-color: white;
            border: 0;
            height: 35px;
            width: 110px;
            margin-left: 35px;
        }
        .footer {
            display: flex;
            align-items: center;
            width: 100%;
            height: 90px;
            background-color: black;
        }
        .img-fluid{
            width: inherit;
            height: 782px;
        }
        .mySlides~.mySlides {
            position: absolute;
            top: 0;
            left: 100%;
            transition: 0.7s;
        }
        .Header a:hover { text-decoration:none }
    </style>
</head>
<body>
<div class="Header" id="myHeader">
    <a class = "headerLogo">
        <a href="/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
        text-align: center; padding-top: 20px">Lunation Boards</h1></a>
    </a>
    <div class="socialmedia">
        <a class = "Facebook">
            <a href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
        </a>
        <a class = "Instagram">
            <a href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png"  width="50px" height="50px"></a>
        </a>
        <a class = "Youtube">
            <a href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
        </a>
        <a class = preorder>
            <button style = "background-color: white;">Pre-Order</button>
        </a>
    </div>
</div>
</body>
</html>

您可以使用：

a:hover{
    text-decoration:none;
}

或使用内联 CSS 显式指定该特定锚元素的text-decoration。

<a href="file:///C:/Noah's%20stuff/Home.html" style="text-decoration: none;"><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
        text-align: center; padding-top: 20px">Lunation Boards</h1></a>

下面的代码段使用第一个建议，因为那样会更好，但是，后者也确实有效。

片段：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <style>
        body {
            margin: 0;
        }
        .Header {
            position: fixed;
            z-index:1;
            width: 100%;
            height: 70px;
            background-color: black;
            text-align: right;
        }
        a:hover{
            text-decoration:none;
        }
        .socialmedia {
            position: fixed;
            right: 100px;
            top: 35px;
            transform: translate(0, -50%);
            display: flex;
            /* add this */
            align-items: center;
            /* add this */
        }
        .preorder button {
            background-color: white;
            border: 0;
            height: 35px;
            width: 110px;
            margin-left: 35px;
        }
        .footer {
            display: flex;
            align-items: center;
            width: 100%;
            height: 90px;
            background-color: black;
        }
        .img-fluid{
            width: inherit;
            height: 782px;
        }
        .mySlides~.mySlides {
            position: absolute;
            top: 0;
            left: 100%;
            transition: 0.7s;
        }
    </style>
</head>
<body>
<div class="Header" id="myHeader">
    <a class = "headerLogo">
        <a href="file:///C:/Noah's%20stuff/Home.html"><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
        text-align: center; padding-top: 20px">Lunation Boards</h1></a>
    </a>
    <div class="socialmedia">
        <a class = "Facebook">
            <a href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
        </a>
        <a class = "Instagram">
            <a href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png"  width="50px" height="50px"></a>
        </a>
        <a class = "Youtube">
            <a href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
        </a>
        <a class = preorder>
            <button style = "background-color: white;">Pre-Order</button>
        </a>
    </div>
</div>

补充一下奥斯曼的答案：

您希望将影响默认状态链接的 CSS(如果您有任何 CSS 这样做(更改为"name：link"(如果将更多伪选择器添加到链接样式中，这将很重要(。

此外，伪选择器的顺序为：
"爱哈特"。
所以：

a:link, a:visited, a:focus, a:hover, a:active

这个问题的简单答案是更改锚标记的悬停属性。我正在回答我自己的问题，以便当其他人看到这个问题时，他们会知道这是应该有效的正确答案。

a:hover{
   text-decoration:none;
}

在我的例子中，容器是一个<a>元素，所有的孩子都有自己的下划线。

我只是在容器上设置了text-decoration: none;。

相关内容

最新更新

热门标签：