javascript - 悬停时图像上的文字

Question

        <a href="xxx.php" ><img src="<?php echo $_SESSION['picture'] ?>" id="ppicture"></img></a>

我希望它在悬停时显示文本，例如编辑此图片。 我想到了 css 上的背景图像，但这是不可能的，因为我从 mysql 调用图像并将位置存储在 $_SESSION 中，如您所见。 如果有任何帮助，我将不胜感激。

例如。 http://tympanus.net/crop1.1/如果将鼠标悬停在图像上，会出现一支铅笔。我想要显示文本而不是铅笔

Answer 1

这可以使用 css 定位轻松完成:

(1) 创建一个 div 标签作为图像和文本的容器。在您的文本周围添加一个 p 标签。

(2) 添加position:relative 到刚刚创建的div:

#div-name {
    position: relative;
}

(3) 为相对于 div 定位的文本添加新样式:

#div-name p {
    position: absolute;
    width: 168px;
    left: 10px;
    bottom: 10px;
    background-color: #AAA;
}

现在您的图片上应该有标题了。我将样式留给您，您可能需要考虑使用 JQuery 使您的编辑标 checkout 现在悬停时。