在悬停

Question

我有一张div，图片作为背景图片。

在图片上，左上角有一个h2元素。

我想要做的是当我将鼠标悬停在div上时，我希望左上角的h2消失，并且会出现一个包含不同文字的新h2中间的div。

我可以自己弄清楚这个位置，但我只是想知道如何基于悬停来显示/显示这些标题？

Answer 1

对于这么简单的任务，你肯定不需要JS 。

可以使用框{}

上的CSS :hover完成所有操作

.box {
  position: relative;
  height: 200px;
  background: #0bf;
}
.title1,
.title2 {
  transition: 0.3s;
}
.title2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* HIDE SECOND TITLE */
  opacity: 0;
}

/* WHEN BOX IS HOVERED SWAP TITLES */
.box:hover .title1 {
  opacity: 0;
}
.box:hover .title2 {
  opacity: 1;
}

<div class="box">
  <h2 class="title1">Some title 1</h2>
  <h2 class="title2">THIS IS COOL</h2>
</div>

Answer 2

纯CSS解决方案：

div {
  position: relative;
  width: 100px;
  height: 100px;
  background: url('http://via.placeholder.com/100x100') no-repeat center center;
  background-size: cover;
}

div:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "Hello";
}

div:hover:after {
  content: "World!";
}

<div></div>