Question

我目前正在处理网站的一个部分，其中有一个网格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>

Answer 1

您可以在每张图片上方放置一个隐藏的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>

OR 我要做的是在你的身体标签之后制作一个隐藏的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>

Answer 2

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

Javascript鼠标悬停图片

2 个答案: