1

私はかなり初心者なので、これがあなたにとって簡単に思える場合は我慢してください。私には簡単ではないからです!

私が構築している新しいフード フェスティバル サイトのフレームワークを提供する素敵なテンプレートを購入しました。私はここに来たばかりなので、スクリーンショットを投稿することさえ許可されないため、テンプレートをどのように変更したかをお見せすることはできません! バカ！

メインのロゴの下には、画像を右から左にスライドさせるいくつかのホバー ボタンがあります。この記事で提案されているように、それらを「スライド」せず、マウスオーバーで単に変更するホバー画像に変えたいと思います。

誰かが私を正しい方向に向けることができますか?

4

2 に答える 2

0

CSS を追加するだけです。

ul#menu:hover li{
  background-image: url('yourImageUrl');
  background-repeat: no-repeat;
  background-position: top center;
}

最終的opacityにホバー画像を半透明にするために使用し、レイアウトに応じて余白/パディングを調整します

デモ: http://jsfiddle.net/ZSGDH/

于 2013-01-15T13:24:28.440 に答える
0

私はついにあなたの問題を知ったと思います.それは、私たちが見ている「マウスホバー効果」が、推定されたCSS3ではなく、実際にはjavascriptによって引き起こされているという事実にあります.

そして、あなたが望むものを得るためには、最初にcssルールを上書きしているjavascriptを無効にする必要があります. その場所は「http://static.livedemo00.template-help.com/wt_39062/js/jquery.backgroundpos.js」です

js/ を無効にすると、リンク先の css3 トリックを使用してアイデアを簡単に実装できます。それを実装する方法についてさらに問い合わせることができますが、当面は自分でやりたいと思います。

于 2013-01-15T23:58:30.470 に答える