html - 別の (より大きな) タグの上にタグを配置するにはどうすればよいですか?
3 に答える
これは非常に一般的であり、プレーンな HTML と CSS で確実に実行できます。JavaScript で行うこともできますが、できれば避けたいと思います。
この例は完全に有効な HTML/CSS であり、奇妙なブラウザー レンダリングの問題はありません (IE 6 までさかのぼっても)。
基本的に、リンクされたサムネイルとリンクされたキーワードを持つ包含要素 (この場合は div) があります。これらはデフォルトで非表示になっており、含まれている div がホバーされている場合にのみ表示されます。
リンクされたサムネイルは、ページ フローから取り出され、リンクされたキーワードが一番上に表示されるように絶対に配置されます。次に、Z インデックスを使用して、キーワードがリンクされたサムネイルのレイヤーよりも高いレイヤーに常にあることを確認します。
それはいけません。違法なhtmlです。「より大きい」の代わりに現在の位置を変更するクリック ハンドラーをアタッチします。
長い返信で答えるつもりでしたが、ここで私のJsfiddleをよくチェックしてください。私は前に何かを解決しようとしていましたが、まあ...チェックしてください。
http://jsfiddle.net/somdow/KSt6a/
コードを見ると、あなたが説明していることを正確に実行しています。
私のJsfiddleには、画像用のスペースがあるdivボックスがあります（これがあなたの画像が入る場所です）。画像はコードにありますが、jsfiddleにはありませんので、altタグが表示されます....とにかく、マウスで-すると、その中に動的に作成されたテキストを含む別の div が表示されます。
画像の内容を独自の画像に置き換えてから、必要なリンク/キーワードのリンクをこの行に挿入するだけです
.prepend('<div class="portSecRollOver"><div class="portSecInner"></div></div>');
行間にあなたの言葉を入れて<div class="portSecInner"> **YOUR WORDS HERE** </div>
必要に応じて CSS を変更します。
ああ、ps、「portSecInner」内にテキストを動的に追加するこの行 (以下) を削除します。独自の単語を挿入するので、この行は必要ありません。
$(this).find('.portSecInner').html("<h3 class='h34roll'>" + $(this).find('img').attr("alt") + "</h3>");