HTML鏈接在頁面加載後自動自動突出顯示

我爲自己感到非常自豪。我在我的第一個網站上工作&我剛剛使用「a」標記創建了我的第一個html鏈接：D您在這一點上似乎唯一的問題是，每次打開我的網頁時，鏈接都是ALREADY強調。我不必點擊它，或者將光標拖到它上面，或者任何東西。我如何製作它，以便只在將光標拖到它上面時才突出顯示它？任何幫助將非常感謝，提前感謝！HTML鏈接在頁面加載後自動自動突出顯示

這裏是我的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 { 



}

我還沒有創建的js文件尚未...

來源

2013-03-18 Jaleel Dwight

你做只有一個CSS的鏈接屬性（一）所以它總是一樣的。爲a：hover，a：visited ...應用不同風格... – 2013-03-18 08:44:09

「突出顯示」是什麼意思？請具體說明，並指定經過測試的瀏覽器。 – 2013-03-18 08:48:42

你的CSS添加以下讓你的鏈接看起來像其餘的內容，並只有在懸停時突出自己（下劃線）。

a { 
    ... 
    text-decoration: none; 
    color: inherit; 
} 

a:hover { 
    ... 
    text-decoration: none; 
    color: inherit; 
}

來源

2013-03-18 08:40:38 techfoobar

您可以使用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'); 
    } 
);

來源

2013-03-18 08:42:03 vlcekmi3

謝謝！出來比我希望的還要好：D – 2013-03-18 09:10:06

HTML鏈接在頁面加載後自動自動突出顯示

回答

相關問題