Question

在我的网站上，我的标题链接回自身并且工作正常，但是当我将鼠标放在它上面时，不需要的下划线显示在它下方，我不想要那样。我已经将标题的文本修饰设置为无，因此我不确定如何解决此问题。我的代码如下。

＆＃13;

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

＆＃13;

Answer 1

你可以使用：

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>

下面的代码段使用了第一个建议，因为这会更好，但后者确实有用。

<强>段：

＆＃13;

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

＆＃13;

Answer 2

您需要将CSS样式放在HTML之前。最佳位置位于HTML顶部的单个样式块内。您的样式标记目前位于链接下方，这就是它未应用的原因。

您可以通过专门设置:hover状态来删除悬停下划线。但请注意，它不适用于辅助功能。

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

您也错过了结束</body></html>代码。

我也修正了以下内容。

＆＃13;

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

＆＃13;

Answer 3

检查锚文本修饰位于：hover，所以添加

a:hover{
text-decoration:none;
}

Answer 4

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

Answer 5

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

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

您可以通过将其添加到CSS

来覆盖它

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

Answer 6

要添加到Ousmane的答案：

您希望更改影响链接的CSS处于默认状态（如果您的任何CSS执行此操作），从“name”更改为“name：link”（如果添加更多伪选择器，这将很重要链接样式）。

此外，伪选择器的顺序是：
“倾向于HAte”。
所以：

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

Answer 7

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

a:hover{
   text-decoration:none;
}

Answer 8

在你的css试用

中悬停时没有文字装饰

a:hover{
border-bottom-color: #424242;
}

或者除了黑色以外的非常颜色

a:hover{
text-decoration:none;
}

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

8 个答案: