当我将鼠标移到 header 的 link 上时，不需要的下划线出现

Question

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

<!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>

Answer 1

您需要将 CSS 样式放在 HTML 之前。最好的地方是 HTML 顶部的单个样式块内。您的样式标签目前在 link 下方，这就是它未应用的原因。

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

您的 HTML 和 CSS 几乎没有其他问题。最好避免在 HTML 标签内使用内联样式。您已经使用 file:// 协议 link 访问了您的主页，使用 http:// 作为其网页。如果您要 link 转到默认主页，那么您也可以 /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>

Answer 2

检查锚文本装饰位于a:hover，所以添加

a:hover{
text-decoration:none;
}

Answer 3

可能有一个 CSS 专门用于悬停。尝试：a:hover {text-decoration:none;}

Answer 4

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

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

您可以通过将其添加到 CSS

来覆盖它

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

Answer 5

您可以使用：

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>

Answer 6

添加到 Ousmane 的回答：

您想将影响处于默认状态的链接的 CSS 从 "name" 更改为 "name:link" (如果以及何时将更多伪选择器添加到链接样式，这将很重要）。

此外，伪选择器的顺序是：
"LoVe For HAte".
所以：

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

Answer 7

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

a:hover{
   text-decoration:none;
}

当我将鼠标移到 header 的 link 上时，不需要的下划线出现

Unwanted underline shows up on my header's link when I move the mouse over it

html

css

header

underline

text-decorations