Javascript 如何使悬停图像变暗并添加文本？

我尝试了多种方法，但似乎都不管用

我最近偶然发现了这一点，但当我尝试在代码中实现它时，文本不会在hover上弹出

---

我的代码：

$（“.pic”）.hover（函数（）{
$（“.info”，this.css（“显示”、“块”）；
}，函数（）{
$（.info），this.css（“显示”，“无”）；
});
$（'.hover'）.mouseover（函数（）{
$（'.text'）.css（“可见性”、“可见”）；
});
$（'.hover'）.mouseout（函数（）{
$（'.text'）.css（“可见性”、“隐藏”）；
});
正文{
宽度：1500px；
文本对齐：居中；
字体系列：arial；
保证金：0自动；
}
@导入url(https://fonts.googleapis.com/css?family=Source+代码+Pro:300）；
保险商实验室{
显示器：flex；
列表样式类型：无；
证明内容：周围的空间；
对齐项目：居中；
底部边框：2件纯黑；
字体系列：“源代码Pro”；
}
.标志{
字体系列：“源代码Pro”；
字体大小：40px；
填充：10px0；
}
导航{
列表样式类型：无；
}
图{
位置：相对位置；
显示：内联块；
}
.pic:hover>.overlay{
位置：绝对位置；
排名：0；
宽度：100%；
身高：99.5%；
左：0；
背景色：#000；
不透明度：0.5；
z指数：100；
显示：块；
}
.info{
显示：无；
位置：绝对位置；
顶部：100px；
左：0；
文本对齐：居中；
}
页脚{
背景：黑色；
颜色：白色；
填充：40px0；
底部：0；
宽度：100%；
z指数：-1；
字体系列：“源代码Pro”；
}

易受骗的

家
商店
容易上当受骗
拜访


神奇女侠

蝙蝠侠

小丑

祸根
祸根
祸根
易受骗的
家
商店
拜访
接触
您的代码中有很多地方需要改进。例如，您甚至不需要任何JavaScript来实现所需的内容

查看下面的改进代码（它修复了您的问题）


@导入url(https://fonts.googleapis.com/css?family=Source+代码+Pro:300）；
身体{
宽度：1500px；
文本对齐：居中；
字体系列：arial；
保证金：0自动；
}
标题ul{
显示器：flex；
列表样式类型：无；
证明内容：周围的空间；
对齐项目：居中；
底部边框：2件纯黑；
字体系列：“源代码Pro”；
}
.标志{
字体系列：“源代码Pro”；
字体大小：40px；
填充：10px0；
}
导航ul{
列表样式类型：无；
}
图{
位置：相对位置；
显示：内联块；
}
.info{
显示：无；
颜色：#fff；
左：0；
最高：45%；
右：0；
文本对齐：居中；
位置：绝对位置；
}
.pic:hover>.overlay{
位置：绝对位置；
排名：0；
宽度：100%；
身高：99.5%；
左：0；
背景色：#000；
不透明度：0.5；
显示：块；
}
.pic:hover.info{
显示：块；
}
页脚{
背景：黑色；
颜色：白色；
填充：40px0；
底部：0；
宽度：100%；
z指数：-1；
字体系列：“源代码Pro”；
}


家
商店
容易上当受骗
拜访


神奇女侠

蝙蝠侠

小丑

祸根
祸根
祸根
易受骗的

家
商店
拜访
接触

您的代码中有很多地方需要改进。例如，您甚至不需要任何JavaScript来实现所需的内容

查看下面的改进代码（它修复了您的问题）


@导入url(https://fonts.googleapis.com/css?family=Source+代码+Pro:300）；
身体{
宽度：1500px；
文本对齐：居中；
字体系列：arial；
保证金：0自动；
}
标题ul{
显示器：flex；
列表样式类型：无；
证明内容：周围的空间；
对齐项目：居中；
底部边框：2件纯黑；
字体系列：“源代码Pro”；
}
.标志{
字体系列：“源代码Pro”；
字体大小：40px；
填充：10px0；
}
导航ul{
列表样式类型：无；
}
图{
位置：相对位置；
显示：内联块；
}
.info{
显示：无；
颜色：#fff；
左：0；
最高：45%；
右：0；
文本对齐：居中；
位置：绝对位置；
}
.pic:hover>.overlay{
位置：绝对位置；
排名：0；
宽度：100%；
身高：99.5%；
左：0；
背景色：#000；
不透明度：0.5；
显示：块；
}
.pic:hover.info{
显示：块；
}
页脚{
背景：黑色；
颜色：白色；
填充：40px0；
底部：0；
宽度：100%；
z指数：-1；
字体系列：“源代码Pro”；
}


家
商店
容易上当受骗
拜访


神奇女侠

蝙蝠侠

小丑

祸根
祸根
祸根
易受骗的

家
商店
拜访
接触

谢谢你的帮助：）@LCAD：不客气。我只是希望你能从我所做的改变中学到一些东西；-）谢谢你的帮助：）@LCAD：不客气。我只是希望你能从c中学到一些东西