当我将鼠标移到标题链接上时，不需要的下划线出现在标题链接上答案

【问题标题】：Unwanted underline shows up on my header's link when I move the mouse over it当我将鼠标移到标题链接上时，不需要的下划线出现在标题链接上
【发布时间】：2017-08-28 23:41:21
【问题描述】：

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

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

【问题讨论】：

只添加 text-decoration: none;到你的 CSS 中的锚标记。
您想将影响默认状态下链接的 css（如果您的 css 中的任何一个这样做）从“name”更改为“name:link”。此外，顺序是“爱恨”。所以：a:link、a:visited、a:focus、a:hover、a:active。

标签： html css header underline text-decorations

【解决方案1】：

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

a:hover{
   text-decoration:none;
}

【讨论】：

【解决方案2】：

补充 Ousmane 的回答：

您想将影响默认状态下链接的 CSS（如果您的任何 CSS 这样做）从“name”更改为“name:link”（如果以及何时添加更多伪选择器，这将很重要）链接样式）。

另外，伪选择器的顺序是：
“爱恨情仇”。
所以：

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

【讨论】：

【解决方案3】：

你可以使用：

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>

下面的 sn-p 使用第一个建议，因为这会更好，但是，后者也确实有效。

sn-p：

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

【讨论】：

a:hover css 修复了它

【解决方案4】：

您需要将 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' 代表 sn-p :D

【解决方案5】：

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

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

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

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

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

a:hover{
text-decoration:none;
}

【讨论】：