html – 将鼠标悬停在图片上,显示文字和不透明度的变化

概述我正在努力研究一段代码.希望悬停在图像上会改变不透明度,并使一些文本在其中可见. 获取图像以改变不透明度很容易,但它只是让我的头脑周围有文本显示导致问题. 我的HTML目前 – .WhyAGradeNotes { display: inline-block; margin-left: 150px; margin-right: 150px; height: 300px; widt 我正在努力研究一段代码.希望悬停在图像上会改变不透明度,并使一些文本在其中可见.

获取图像以改变不透明度很容易,但它只是让我的头脑周围有文本显示导致问题.

我的HTML目前 –

.WhyAGradeNotes {  display: inline-block;  margin-left: 150px;  margin-right: 150px;  height: 300px;  wIDth: 250px;  background-image: url("http://www.placehold.it/250x300");}.WhyAGradeNotes p {  visibility: hIDden;}.WhyAGradeNotes:hover {  opacity: 0.5;  .WhyAGradeNotes p {    visibility: visible;  }}

<section class = "WhyAGrade">      <span class = "WhyAGradeNotes"><p>Revision Notes</p></span>      <span class = "WhyAGradeSample"></span>    </section>

如你所见,我遇到了困难.我猜测它与可见性状态有关,但我无法弄清楚如何让它正常工作

解决方法 试试下面的代码

.WhyAGradeNotes {	display: inline-block;	margin-left: 150px;	margin-right: 150px;	height: 300px;	wIDth: 250px;	background-image: url("http://www.placehold.it/250x300");}.WhyAGradeNotes p {	visibility: hIDden;}.WhyAGradeNotes:hover {	opacity: 0.5;}.WhyAGradeNotes:hover p {	visibility: visible;}

<section class = "WhyAGrade">     <span class = "WhyAGradeNotes">      <p>Revision Notes</p>    </span>     <span class = "WhyAGradeSample"></span> </section>

总结

以上是内存溢出为你收集整理的html – 将鼠标悬停在图片上,显示文字和不透明度的变化全部内容，希望文章能够帮你解决html – 将鼠标悬停在图片上,显示文字和不透明度的变化所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。