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

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

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

初始案例

#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, 0, 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>​

Answer 2

工作小提琴：https://jsfiddle.net/2y67zerm/ 您可以使用display或visibility属性

#wrapper .text {
  position: absolute;
  bottom: 30px;
  left: 10px;
  top:10px;
  visibility: hidden;
  display:none;
}
#wrapper:hover .text {
  visibility: visible;
  display:block;
  z-index:1000;
}

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

Answer 3

看看这个， http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover

这是＆＃34; hover＆＃34;。

的一个例子

如果这有助于你，请告诉我。

由于

Answer 4

这可以使用display css属性来实现。

#wrapper p { display: none; }
#wrapper:hover img { display: none; }
#wrapper:hover p { display: block; }

你的例子有不必要的课程，所以他们已被删除。

解决方案：

<style>
    #wrapper p { display: none; }
    #wrapper:hover img { display: none; }
    #wrapper:hover p { display: block; }
</style>

<div id="wrapper">
    <img src="http://i.imgur.com/UHqk6nC.jpg" />
    <p>Some text</p>
</div>

请参阅此小提琴以获取示例：https://jsfiddle.net/nt5vjywu/

希望有所帮助！

更新：

更新了悬停在顶部的文字。请注意img和p标签的重新排序。

https://jsfiddle.net/nt5vjywu/2/

Answer 5

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