1

私はこれが初めてです。私はhtmlで書いていますが、リンクをホバーしたときに別の画像に切り替えることができるかどうか興味がありました.

4

4 に答える 4

1

絶対。コードが次のようになっている場合:

<div class="menu">
<a href="1.html">First</a>
<a href="2.html">Second</a>
<a href="3.html">Third</a>
</div>

頭にいくつかのスタイルを追加するだけです。

<style type="text/css">
    /* These are comments, and are ignored by the browser
            . {dot} is the CSS selector for a class
            We are selecting all of the "a" elements inside of 
            the element with a class of "menu"
    */
    .menu a {
        background-image: url('link.gif');
        width: 100px;
    }

    /* :hover, :active, and :focus are all pseudo-selectors -- they select
            elements based on their state rather than based on their attributes
    */
    .menu a:hover, .menu a:active, menu a:focus {
        background-image: url('link_hover.gif');
    }
</style>

HTML と CSS の学習を開始するのに最適な場所の 1 つはW3Schoolsです。それらの例を読むことで、基本をしっかりと把握できます。次に、ここでHTMLとCSSの質問を参照すると、物事がどのように機能するかについてより多くの洞察が得られます。幸運を！

于 2010-03-29T20:16:50.953 に答える
1

はい、できます。これは JavaScript を使用した例です。

于 2010-03-29T20:09:09.617 に答える
1

Sean Vieira が言うように、一般的な方法は、メニュー タグの状態に応じて HTML タグの CSS を変更することです。

これは、次のような基本的なものです。

<スタイル>
div.myimg:hover {
    背景画像:url(p1.png);
}

div.myimg {
    背景画像:url(p2.png);
}
</style>

<div class="myimg">
<a href="#">私のリンクはこちら</a>
</div>
</コード>

また、JQuery ライブラリーの hover 関数を使用することも可能であり、それほど難しくありません。

于 2010-03-29T20:27:35.223 に答える
0

CSS スプライトを使用することを強くお勧めします。

http://www.alistapart.com/articles/sprites

最初は概念が少しわかりにくいかもしれませんが、基本的には、元の画像とそのホバー状態 (つまり、リンクがホバーされたときにスワップする画像) を 1 つの画像に結合して、アンカー要素に配置された背景画像として、その画像の適切な部分を一度に。

このアプローチには、いくつかの重要な利点があります。

  • 2 つの画像を 1 つに結合することで、1 つの HTTP 要求が不要になり、ページの読み込みパフォーマンスが向上します。
  • 典型的な JavaScript スワップ効果を使用する場合、ユーザーがリンクの上にマウスを置くまで、「ホバー」イメージはロードされません。これにより、視覚的に不快な読み込み/レンダリングに顕著な遅延が生じます。CSS スプライトを使用すると、両方の画像の状態が一度に読み込まれる (同じ画像の一部である) ため、ホバー効果が瞬時に表示されます。
  • 一部 (私自身を含む) は、単純なホバー イメージ スワップはビヘイビア レイヤー (JavaScript) ではなく、プレゼンテーション レイヤー (CSS) に属していると主張します。これは単なる良い習慣であり、より保守しやすく理解しやすいコードを作成できます。

もちろん、これは、切り替えている画像がリンク画像自体であり、リンクにカーソルを合わせたときに変化するページ上の別の要素ではないことを前提としています。それは確かに可能ですが、JavaScript が必要です。

于 2010-03-30T07:43:16.147 に答える