80

マウスを置いたときに別の画像を表示するように画像を設定しましたが、最初の画像は引き続き表示され、新しい画像は高さと幅を変更せず、他の画像と重なります。私はまだ HTML/CSS にかなり慣れていないので、簡単なことを見落としている可能性があります。コードは次のとおりです。

<img src="LibraryTransparent.png" id="Library">

#Library {
    height: 70px;
    width: 120px;
}

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
    height: 70px;
    width: 120px;
}
4

22 に答える 22

109

別のオプションは、JS を使用することです。

<img src='LibraryTransparent.png' onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" />
于 2014-07-14T20:48:01.680 に答える
92

1 つの解決策は、次のように最初の画像も背景画像として使用することです。

<div id="Library"></div>

#Library {
   background-image: url('LibraryTransparent.png');
   height: 70px;
   width: 120px;
}

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
}

ホバー画像のサイズが異なる場合は、次のように設定する必要があります。

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
   width: [IMAGE_WIDTH_IN_PIXELS]px;
   height: [IMAGE_HEIGHT_IN_PIXELS]px;
}
于 2013-09-15T14:10:49.937 に答える
50

私が通常行うことは、両方の状態で二重の画像を作成し、元の要素の背景として使用する一種の 2 フレーム フィルムのように動作して、要素の幅/高さがピクセル単位で設定されるようにすることです。画像の半分だけ。次に、ホバー状態が定義するのは、基本的に「フィルムを移動して他のフレームを表示する」ことです。

たとえば、イメージが灰色の Tux でなければならず、ホバー時にカラフルな Tux に変更する必要があると想像してください。また、「ホスティング」要素は ID「tuxie」のスパンです。

  1. 2 つの Tux を使用して 50 x 25 の画像を作成します。1 つはカラーで、もう 1 つはグレーです。
  2. 次に、画像を 25 x 25 スパンの背景として割り当て、
  3. 最後に、背景を 25px 左に移動するようにホバーを設定します。

最小限のコード:

<style>
    #tuxie {
        width: 25px; height: 25px;
        background: url('images/tuxie.png') no-repeat left top;
    }
    #tuxie:hover { background-position: -25px 0px }
</style>

<div id="tuxie" />

そして画像：

二コマタキシー

利点は次のとおりです。

  • 両方のフレームを 1 つのファイルに入れることで、一度に読み込まれることが保証されます。これにより、他のフレームがすぐに読み込まれないため、最初のホバーが適切に機能しない場合に、低速接続での醜いグリッチが回避されます。

  • 「ペア」フレームが混同されることがないため、この方法で画像を管理する方が簡単な場合があります。

  • Javascript または CSS セレクターを賢く使用すると、これを拡張して、1 つのファイルにさらに多くのフレームを含めることができます。

    理論的には、複数のボタンを 1 つのファイルに配置して、それらの表示を座標で管理することもできますが、そのような方法はすぐに手に負えなくなります。

これは CSS プロパティで構築されていることに注意してbackgroundください。実際に<img />sを使用する必要がある場合は、背景と重なるため、プロパティを設定しないでください。src(ここで透明度を巧みに使用すると興味深い結果が得られる可能性があると考えてください。ただし、おそらく画像の品質とエンジンに大きく依存します。)

于 2013-11-14T00:09:57.293 に答える
0

私のjqueryソリューション。

function changeOverImage(element) {
        var url = $(element).prop('src'),
            url_over = $(element).data('change-over')
        ;

        $(element)
            .prop('src', url_over)
            .data('change-over', url)
        ;
    }
    $(document).delegate('img[data-change-over]', 'mouseover', function () {
        changeOverImage(this);
    });
    $(document).delegate('img[data-change-over]', 'mouseout', function () {
        changeOverImage(this);
    });

とhtml

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20original%20/%3E&w=342&h=300" data-change-over="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20over%20/%3E&w=342&h=300" />

デモ: JSFiddle デモ

よろしく

于 2016-02-04T10:57:49.827 に答える
0

実際の例: JSFiddle

受け入れられた回答にはいくつかの問題があります。画像はそこでサイズ変更されませんでした。画像のサイズを変更するには、background-size プロパティを使用します。

HTML:

<div id="image"></div>

CSS:

#image {
   background-image: url('image1');
   background-size: 300px 390px;
   width: 300px;
   height:390px;
}

#image:hover{
  background: url("image2");
  background-size: 300px 390px;
}
于 2016-04-26T06:07:37.973 に答える
0

「コンテンツ:;」を使用 ホバーで。これは機能します。

于 2020-08-15T02:56:13.190 に答える
0

問題は、「src」属性を介して最初の画像を設定し、ホバー時に背景画像を画像に追加することです。これを試して：

html での使用:

<img id="Library">

次にcssで：

#Library {
    height: 70px;
    width: 120px;
    background-image: url('LibraryTransparent.png');
}

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
}
于 2013-09-15T14:10:31.060 に答える