0

次のようなシンプルなナビゲーション バーがあります。

<ul class="navigation">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="contact.html">Contact Us</a></li>
</ul>

とてもシンプルなナビゲーションです。ユーザーがリンクの 1 つにカーソルを合わせると、次のように、リンク テキストの両側に波括弧を追加したいと思います。

ホーム {私たちについて} 製品 お問い合わせ

私が考えた方法は、各タグに onClick="navAnimation('TheLinkName')" を追加して、javascript でこれを行うことができるということです。次に、JS で、指定されたリンク タグの innerHTML を取得し、テキストの両側に波線を追加します。

これが最善の方法ですか？とても些細なことのためにかなりの仕事のように思えます..

ありがとう！

4

3 に答える 3

3

疑似要素を使用して、CSS だけでこれを行うことができます。

ul.navigation a:hover:before { content: "{"; }
ul.navigation a:hover:after { content: "}"; }
于 2012-12-13T06:51:32.727 に答える
1

AまたはLI要素の「onmouseover」イベントを処理するのが最善の方法だと思います。

<ul class="navigation">
    <li><a onmouseover="AddBrackets(this);" href="index.html">Home</a></li>
    <li><a onmouseover="AddBrackets(this); href="about.html">About Us</a></li>
    <li><a onmouseover="AddBrackets(this); href="products.html">Products</a></li>
    <li><a onmouseover="AddBrackets(this); href="contact.html">Contact Us</a></li>
</ul>

AddBrackets関数は次のようになります。

function AddBrackets(x) {
    x.innerHTML = "{" + x.innerHTML + "}";
}

あなたがやりたかったことのように聞こえますか？

于 2012-12-13T07:42:05.597 に答える
0

使用pseudoクラスafter and before

CSS

ul li{display:inline; padding:2px 6px; color:green; text-align:center}
ul li a{display:inline; color:green; width:100px; text-decoration:none; display:inline-block}
ul li a:hover:after{ content:"}" }
ul li a:hover:before{ content:"{" }

<強い>デモ

于 2012-12-13T06:53:30.477 に答える