-3

我目前正在研究一个网站的一部分，其中有一个网格 9 图像。我想要它，所以当您的鼠标移到其中一张图像上时。一个 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

您可以在每个图像上方放置一个隐藏的 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，然后使用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 回答
0

听起来你想要一个Tooltip，如果你已经在使用 jQuery jQuery UI Tooltip可能是一个不错的选择，它们可以附加到任何元素。

于 2013-07-16T15:23:40.610 回答