2

どういうわけか、アクティブなテキスト（a）が太字になるようにしましたが、マウスでクリックしたときにのみアクティブになり、クリックから解放されるとオフになり、テキストが元に戻ります通常の状態。

どうしてこれなの？

MSN にたどり着いた場合は、検索バーの上のテキストを見てください。クリックすると太字になり、オレンジ色に変わります。ページを離れることなく。それが私がやろうとしていることです。

HTML:

<div id="searchtopics">
<ul>

    <li><a href="#">Web</a> </li>
    <li><a href="#">MSN</a> </li>
    <li><a href="#">Images</a> </li>
    <li><a href="#">Video</a> </li>
    <li><a href="#">News</a> </li>
    <li><a href="#">Maps</a> </li>
    <li><a href="#">Shopping</a> </li>

</ul>
</div>

CSS:

#searchtopics {
    position:absolute;
    margin-left:208px;
    margin-top:38px;
    }

#searchtopics a {
    text-decoration:none;
    float:left;
    padding: 2px 6px 4px 6px;
    color:rgb(100,100,100);
    }

#searchtopics a:hover{
    text-decoration:underline;

    }

#searchtopics a:active{
    color:rgb(100,100,100);
    font-weight:bold;

    }

#searchtopics ul   {
    display:inline;
    list-style:none;
}


#searchtopics ul li {
    display:inline;
    color:rgb(100,100,100);
    font-family:"arial", times, sans-serif;
    font-size:12px;
    }
4

4 に答える 4

7

これは、そのリンクがマウスでクリックした場合にのみアクティブになるためです。マウスがその上にある間ずっと効果を持続させたい場合は、 を使用します:hover。ページが訪問された後も持続させたい場合は、 を使用します:visited。

編集

新しいページがロードされたときにリンクをアクティブのままにしたい場合は、そのリンクにそのスタイルを適用するクラスを与える必要があります。

<li><a href="#" class="active">Images</a> </li>

#searchtopics a:active, a.active {
于 2013-02-13T02:11:05.170 に答える
1

実際に表示されているコンテンツへのリンクを表示したい場合は、JavaScript を少ししか使わない方法があります。他のすべての太字を無効にし、現在のリンクの太字を有効にしてコンテンツを表示するコンテンツを表示する関数を記述します。

于 2013-02-13T02:15:23.797 に答える
0

リンクには主に 4 つの状態があります。

a - ちょうどそこに座っていて、一度もクリックされていないか、クリックされる過程にあるときです。

a:hover - これは、javascript のマウスオーバー イベントに相当するものです (慣れている場合)。ポインターがリンクの上に「ホバー」すると、スタイルを変更できます。

a:active - このスタイリングは、何かがリンクをクリックしている一瞬だけを表示します。この疑似クラスは、おそらくこの理由から、一般大衆によって最も使用されていません。

a:visited - このスタイルは、ユーザーがリンクをクリックした後に表示されます。

したがって、目立つリンクのスタイルを変更しようとしている場合は、a:active ではなく別の疑似クラスを使用することをお勧めします。

お役に立てれば！

于 2013-02-13T02:34:01.240 に答える