HTML链接会在页面加载后自动高亮显示

HTML link automatically highlighting itself as soon as page is loaded

本文关键字：加载 自动高亮 显示 链接 HTML      更新时间：2023-09-26

我为自己感到骄傲。我正在做我的第一个网站&;我刚刚创建了我的第一个html链接使用"a"标签:D唯一的问题，我似乎有在这一点上，每次我打开我的网页，链接已经突出显示。我不需要点击它，或者把光标拖到它上面，等等。如何使它只在将光标拖动到其上时高亮显示?任何帮助将非常感激，提前感谢!

这是我的HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Round Table</title>
<meta charset="utf-8">
<link rel="stylesheet" href="RTH.css">
<script src="RTH.js"></script>
</head>
<body>

<H1> Come & take a seat at the Round Table B] </H1> 
<p> "Where <i>REAL MUSIC</i> still exists"</p><br><br>
<ol type=I> <H2> <li>BEAT$</li> 
<br><li>Music by Mercile$$</li> 
<br><li>Spoken Word</li> <br>
<li><a href="RthPg2.html" title="RthPg2">Tale$ of a Blind Sword$man</a></li> </H2> </ol><br><br><br>
<dt><i>RTH</i> consists of:</dt> 
<dd>Show Luciano, Pistol McFly, Dior, YZ, & last but not least...Mercile$$</dd>
<p> thee music industry is DEAD !! i hope to bring restoration.<br>
                                                                                            ~mercile$$</p><br>
<footer>&copy; Round Table</footer>
</font>
</body>
</html>
这是我的CSS: 
body {
        background-image: url("Round Table, Hoe II.jpg");
    background-repeat: Repeat;
    font-family: AR Christy, Kozuka Gothic Pr6N, Cooper std;
    color: Red;
    text-shadow: 1px 0 0 #CEA40C, 0 -1px 0 #CEA40C, 0 1px 0 #CEA40C, -1px 0 0 #CEA40C;
        font-size: 25px;
        margin: 0 auto;
    text-align: center;
    width: 700px;
}
h1 {
    font-family: AR Christy, Kozuka Gothic Pr6N, Cooper std;
    color: Red;
    text-shadow: 2px 0 0 #CEA40C, 0 0px 0 #CEA40C, 0 2px 0 #CEA40C, 0px 0 0 #CEA40C;
        margin: 0 auto;
        text-align: center;
    width: 700px;
}
i {
    font-family: AR Christy, Kozuka Gothic Pr6N, Cooper std;
    color: White;
    text-shadow: 2px 0 0 #CEA40C, 0 0px 0 #CEA40C, 0 2px 0 #CEA40C, 0px 0 0 #CEA40C;
        margin: 0 auto;
        text-align: center;
    width: 700px;
}
dt {
    color: #1BD29B;
    text-shadow: 4px 0 0 #CEA40C, 0 0px 0 #CEA40C, 0 4px 0 #CEA40C, 0px 0 0 #CEA40C;
    font-size: 45pt;
    padding: 10px;

}
dd {
    color: White;
    padding: 5px 10px 5px 10px; 
    background: #f03; 
    border: solid 2px #fff;
}
p {
    padding: 5px 10px 5px 10px; 
    background: #f03; 
    border: solid 2px #fff; 
}
footer {

}

你可以使用CSS选择器为任何锚定状态

a, a:visited, a:active {
     text-decoration: none;
     color: inherit; // from parent element
}
a:hover, a.highlighted {
    text-decoration: underline;
    color: blue;
    // anything you want
}

，然后使用jquery添加特定类的悬停

$('a').hover(
    function () {
        $(this).addClass('highlighted');
    }
);

添加以下内容到你的CSS中，使你的链接看起来像其他内容，并且只有当鼠标悬停在上面时才会突出显示(下划线)。

a {
    ...
    text-decoration: none;
    color: inherit;
}
a:hover {
    ...
    text-decoration: none;
    color: inherit;
}
相关文章：