0

私は自分自身をとても誇りに思っています。私は最初のウェブサイトに取り組んでおり、「a」タグを使用して最初の html リンクを作成しました: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 {



}

まだ.jsファイルを作成していません...

4

2 に答える 2

1

任意のアンカー状態に 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-18T08:42:03.253 に答える
0

以下を CSS に追加して、リンクが他のコンテンツと同じように見えるようにし、ホバーしたときにのみリンク自体を強調表示 (下線) します。

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

a:hover {
    ...
    text-decoration: none;
    color: inherit;
}
于 2013-03-18T08:40:38.790 に答える