我想隐藏图像并在悬停在其上时显示文本

Question

我想将鼠标悬停在我的图像上,并将文本显示在图像的位置,但我不想使用jQuery或JavaScript.

#wrapper .text {
  position: relative;
  bottom: 30px;
  left: 0px;
  visibility: hidden;
}
#wrapper:hover .text {
  visibility: visible;
}

<div id="wrapper">
  <img src="kero.png" class="hover" height="200px" width="200px/>
  <p class="text">text</p>
</div>?

Answer 1

不确定我是否正确理解您想要什么，但这对您有用吗？

\n\n

初始案例

\n\n

\r\n

\r\n

#wrapper {\r\n  position: relative;\r\n}\r\n\r\n.text {\r\n  opacity: 0;\r\n  position: absolute;\r\n  bottom: 0;\r\n}\r\n\r\n.hover:hover {\r\n  opacity: 0;\r\n}\r\n\r\n.hover:hover + .text {\r\n  opacity: 1;\r\n}

\r\n

<div id="wrapper">\r\n  <img src="http://placehold.it/200x200" class="hover" />\r\n  <p class="text">text</p>\r\n</div>\xe2\x80\x8b

\r\n

\r\n

\r\n

\n\n

扩展案例

\n\n

\r\n

\r\n

#wrapper {\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text {\r\n  opacity: 0;\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  transition: opacity .5s;\r\n  background: rgba(0, 0, 0, .5);\r\n  color: white;\r\n  margin: 0;\r\n  padding: 10px;\r\n}\r\n\r\n.hover {\r\n  display: block;\r\n}\r\n\r\n#wrapper:hover .text {\r\n  opacity: 1;\r\n}

\r\n

<div id="wrapper">\r\n  <img src="http://placehold.it/200x200" class="hover" />\r\n  <p class="text">text</p>\r\n</div>\xe2\x80\x8b

\r\n

\r\n

\r\n

\n