0

ウェブサイト用のソーシャル メディア アイコンを作成しました。もう少し面白く見たかったので、オーバーレイを配置しました。これは、ホバーを上に移動すると表示されます。私は使用しようとしました

#bla:hover {
background-image: overlay.png;
}

しかし、うまくいきませんでした。リンクはこちら: http ://tdfts.c​​om/projects/akvile_test/

私もこれを試しました（申し訳ありませんが、実際に説明できません:D）：http ://tdfts.c​​om/projects/akvile_test/website/ しかし、これでもうまく機能せず、ieとffでひどく見えました。

ソーシャル メディア バーの位置は気にしないでください。オーバーレイにはトランジションが必要です。

前もって感謝します

4

4 に答える 4

0

上記のスタイルによれば、代わりに使用する必要があります

#bla:hover {
background-image: url('overlay.png');
}

内部の URL には正しい場所が必要です。

位置に関しては、overlay.png を含む div を絶対にする必要があります。【ポジション：絶対】トップ: 0;]

親が相対的または絶対的であることを確認してください

于 2014-08-05T08:22:09.007 に答える
0

あなたが持っている

#fb {
    height: 40px;
    width: 40px;
    background-image: url(img/socialmedia/fbhover.png);
}

あなたのstyle.css（72行目）で、background-image自動的に適用されます。代わりに、次のようなものが必要です。

#fb {
    height: 40px;
    width: 40px;
}

#fb:hover {
    background-image: url(...);
}

ただし、これがあなたの望むものであるとは思えません。background-imageaを on に設定すると、 behind<img src="foo.png">が表示されるだけで、画像を完全に置き換えたいと思います。background-imagefoo.png

したがって、次の 2 つのオプションがあります。

1) 簡単: jQuery を使用.hover()し、Javascriptを使用して.attr("")変更します。src<img>

2) 難しい / 醜い (しかし JS は必要ありません): 2 つの div を重ねて作成します。デフォルトの画像を下に、ホバー画像を上にします。上部の div の不透明度を 0 に設定してから、上部の div の不透明度を 1 に変更する CSS:hoverセレクターを実行します。率直に言って、最初のオプションを使用します。

于 2014-08-05T08:26:59.563 に答える
0

私が Facebook オーバーレイで行ったように、いくつかの CSS を適用できます。

#overlayfb {
position: absolute;
height: 40px;
width: 40px;
z-index: 1;
background-image: url(img/socialmedia/fbhover.png);
top: -25px;
}

-25px のトップ。

これを使用 #overlayfb:hover { top: -25px; }

私はそれがあなたのために働くと思います

于 2014-08-05T08:18:59.210 に答える