Jquery 将鼠标悬停在图像上时显示文本

我想在将鼠标悬停在图像上时，同时切换到另一个图像并显示文本。我已经成功地在悬停时切换到另一个图像，但我不知道如何显示文本。我还想自定义文本（颜色、大小、位置）。我的代码：

---

使用CSS

：悬停

显示文本，此处与同级选择器一起使用

+

通过为CSS规则使用一个类，如

.showtext:hover+div

，您只需要为所有文本使用一个类，与

id

相反，id对于每个文本都必须是唯一的

根据评论更新

为了让文本位于图像顶部，我在它们周围添加了一个包装器，并给文本一个位置

.imgwrapper{
位置：相对位置；
}
.showtext+div{
位置：绝对位置；
左：0；
排名：0；
显示：无；
指针事件：无；
字体大小：24px；
宽度：250px；
}
.showtext:hover+div{
显示：块；
}

---

在单个查询中使用

mousenter

和

mouseleave

我建议对您的图像应用特定的选择器类

.firstImage

$（'.firstImage'）。在({
鼠标指针：函数（evt）{
$（this.attr（'src'，'http://placehold.it/350x350')
$（this.parent（'div'）.css（'color'，'red'）；
},
鼠标移动：功能（evt）{
$（this.attr（'src'，'http://placehold.it/350x150')  
$（this.parent（'div'）.css（'color'，'blue'）；
}
});
您只需为文本“div”提供一个id，并将其更新到您的CSS中即可：


img+div{
显示：无；
}
img:hover+#图像文本{
显示：块；
}

试试这个：


$（文档）.ready（函数（）{
$（“.myimg”）.mouseenter（函数（）{
$（this.attr（{src:http://kurld.com/images/wallpapers/flower-image/flower-image-18.jpg"});
$（“.txt”）.show（）；
}).mouseleave（函数（）{
$（this.attr（{src:https://static.pexels.com/photos/67857/daisy-flower-spring-marguerite-67857.jpeg"});
$（“.txt”）.hide（）；
})
})
img{
宽度：200px；
高度：100px；
}
.txt{
显示：无；
位置：绝对位置；
底部：10px；
左：10px；
背景色：#fff；
}
.包装纸{
位置：相对位置；
}

你能发布完整的HTML吗？我已经用完整的代码编辑了这篇文章，请检查，谢谢。你想显示什么样的文本？有一个标题属性，你可以使用图片来简单地显示它的标题。您还可以使用css:hover伪类，以便在有人将鼠标悬停在父元素上时显示内容。@Phoung另外，请不要忘记接受您选择的答案，方法是单击下面的灰色复选标记以获得答案分数谢谢您的答复，我是一名初学者。我必须给这个部门命名吗？因为我还有很多其他的div，如果是img+#name和img:hover+#name？@Phuong更新了我的答案，并且通过使用一个类，像这样
。showtext:hover+div
，你所有的图像只需要一个div谢谢，它会显示文本，但文本在图像下面，我希望文本在图像上，有办法吗？@Phuong再次更新了我的答案，展示了如何做到这一点它工作得非常完美！！非常感谢！我可以问一下.imgwrapper的用途吗？谢谢，它显示文本，但文本在图像下面，我希望文本在图像上，有什么方法可以做到吗？@Phuong您可以添加一个包含隐藏图像文本的范围。在图像悬停时，您只需显示文本范围。