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

我正在努力研究一段代码.希望悬停在图像上会改变不透明度,并使一些文本在其中可见.

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

我的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;

}

}

Revision Notes

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