html – 当我将鼠标悬停在其上时,我想隐藏图像并在其位置显示文本

我想将鼠标悬停在我的图像上,并将文本显示在图像的位置
但我不想使用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>​

解决方法

不确定我是否理解你想要的东西,但这对你有用吗？

初始案例

#wrapper {
  position: relative;
}

.text {
  opacity: 0;
  position: absolute;
  bottom: 0;
}

.hover:hover {
  opacity: 0;
}

.hover:hover + .text {
  opacity: 1;
}

<div id="wrapper">
  <img src="http://placehold.it/200x200" class="hover" />
  <p class="text">text</p>
</div>​

扩展案例

#wrapper {
  display: inline-block;
  position: relative;
}

.text {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity .5s;
  background: rgba(0,.5);
  color: white;
  margin: 0;
  padding: 10px;
}

.hover {
  display: block;
}

#wrapper:hover .text {
  opacity: 1;
}

<div id="wrapper">
  <img src="http://placehold.it/200x200" class="hover" />
  <p class="text">text</p>
</div>​