javascript - 鼠标悬停和移出时交替显示两个 div

Question

下面我给出了两个 div 元素。我想一次显示一个div。鼠标移开时 1 个 div，鼠标悬停时 1 个 div，无需使用 jquery。提前致谢

<div style= 'position: absolute;right: 0px;bottom: 0px;background:#ccc;color:#ffffff;height:15px; width:100px;text-align: center;color:#fff'><a href="http://facebook.com/site=1" target="_blank"> Facebook Ads</a> </div><div style= 'position: absolute;right: 0px;bottom: 0px;background:#ccc;color:#ffffff;height:15px; width:15px;text-align: center;'> Ads </div>

Answer 1

这是一种简单的 CSS 方法来完成您想要的操作。

切换悬停时 div 的可见性。这种方式涉及将两个 div 包装在父级内。

.parent {
  position: absolute;
  right: 50px;
  bottom: 50px;
}

.first {
  background: #ccc;
  color: #ffffff;
  height: 15px;
  width: 100px;
  text-align: center;
  color: #fff
}

.second {
  background: #ccc;
  color: #ffffff;
  height: 15px;
  width: 100px;
  text-align: center;
  display: none;
}

.parent:hover > .first {
  display: none;
}

.parent:hover > .second {
  display: block;
}

.parent {
  position: absolute;
  right: 50px;
  bottom: 50px;
}

.first {
  background: #ccc;
  color: #ffffff;
  height: 15px;
  width: 100px;
  text-align: center;
  color: #fff;
  display: none;
}

.second {
  background: #ccc;
  color: #ffffff;
  height: 15px;
  width: 100px;
  text-align: center;
}

.parent:hover>.first {
  display: block;
}

.parent:hover>.second {
  display: none;
}

<div class="parent">
  <div class='first'><a href="http://facebook.com/site=1" target="_blank"> Facebook Ads</a> </div>
  <div class='second'> Ads </div>
</div>