一緒

Question

http://jsfiddle.net/PaulNLondon/dG3Gb/

作業ロールオーバー二組の私がこれまでに持ってjsFiddleショー（私は願って、それはそれを使用して私の最初の時間です）。 。 。私は画像ベースのメニューと一緒に働くテキストベースのロールオーバーメニューを使用しようとしています。

jsFiddleでこれを表示することはできませんでしたが、表示されている部分の2倍の高さの画像を使用しています。ホバー上の位置を移動して、画像の代替バージョンを表示します私がしたことは、divの背景を色付けして、その位置を示すことです。それらは、非常に特に、次のものへの連続性を有する所望の視覚効果を与えるために配置される。 （jsFiddleのページタイトルテキストと最初のイメージブロックのオーバーラップは問題ではありません）

私の目的は、関連するテキストメニュー項目の太い下線を引くことです下の境界線の設定を使用しています）、画像メニューを表示するための画像シフトがあります。 。 。 とメニュー項目のテキストの上にマウスカーソルを置いて、メニュー項目のテキストの下線をつけたいのですがと画像メニューの関連する画像を代替画像に切り替えるようにします。

私は下線を引いて画像上にホバリングを付けていると思っていましたが、divを配置したdivがFirefoxを使って正しく表示されるように見えます（整列がうまくいかないjsFiddle）。

私はあなたの意見で私のアプローチがすべて間違っていると私に言おうとしても、あなたが持っているかもしれない提案を感謝します。私はCSSとHTMLの限界に達しています。私は実際にJavaScriptを知らない（Dynamicdriveで見つけたスライドショーにはjQueryを使用した以外は）。

Answer 1

私はコメントにリンクしているサイトの助けを借りて最後にそこに着いた。 。 。おそらくそれは少し重いイメージですか？私はhttp://doublerollover.moyni.co.ukにそれを公開しました - しかし、私はまだメニューの下に伸びているように見えるリンクについて困惑しています。

私は解決策とそれをより効率的にやったかもしれないとのコメントを感謝します。