-3

私は現在、グリッド 9 画像があるサイトのセクションに取り組んでいます。マウスが画像の1つに移動したときにそうしたいと思います。テキストを含む画像の上に div が表示されます。これを行う方法について何か提案はありますか？ありがとう！

グリッドの一部は次のようになります

<div class = 'picture-container'>
            <div class = 'picture-wrapper' id = 'top-left'>
                <img src = 'ds-map.png' height = '100%' width = '100%'>
            </div>
            <div class = 'picture-wrapper' id = 'top-right'>
                <img src = 'ds-map.png' height = '100%' width = '100%'>
            </div>
            <div class = 'picture-wrapper' id = 'top-center'>
                <img src = 'ds-map.png' height = '100%' width = '100%'>
            </div>
        </div>
4

2 に答える 2

0

Tooltipが必要なようですね。既に jQuery を使用している場合は、jQuery UI Tooltipが適切なオプションである可能性があります。それらは任意の要素にアタッチできます。

于 2013-07-16T15:23:40.610 に答える
0

各画像の上に非表示の div を配置し、CSS を介して配置することができます...

<div class = 'picture-container'>
            <div class = 'picture-wrapper' id = 'top-left'>
                <div>with text</div><--- position this div relative to the container and hide/show it on rollover
                <img src = 'ds-map.png' height = '100%' width = '100%'>
            </div>
        </div>

または、bodyタグの後に隠しdivを1つ作成し、javascriptを使用して表示/配置し、テキストを動的に変更します

<div id="populateme"><div> <--- when mouse over the image modify this div to do what you want with javascript
<div class = 'picture-container'>
                <div class = 'picture-wrapper' id = 'top-left'>
                    <img src = 'ds-map.png' height = '100%' width = '100%'>
                </div>
        </div>
于 2013-07-16T15:22:30.743 に答える