html - 将鼠标悬停在按钮上时，CSS top img 不直接位于背面 img 的顶部

Question

我有一个按钮，上面放了两个图标，一个是灰色的，一个是蓝色的。我通过添加隐藏了蓝色图像display: none;，当我将鼠标悬停在按钮上时，我将 css 更改为display: block;. 蓝色图像显示但不直接覆盖灰色图像。

.page-btn-icon {
  vertical-align: middle;
  width: 36px;
  height: 36px;
  margin: 0 4px;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 18px;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  outline: 0 none !important;
}

.page-btn-icon .icon {
  width: 16px;
  height: 16px;
}

.page-btn-icon .img-top {
  display: none;
}

.page-btn-icon:hover .img-top {
  display: block;
}

<button class="page-btn-icon">
  <!--<img class="icon" src="{% static 'img/icons/filter_g.png' %}">
  <img class="icon img-top" src="{% static 'img/icons/filter_b.png' %}">-->
  <img class="icon" src="https://dummyimage.com/16x16/fff/aaa">
  <img class="icon img-top" src="https://dummyimage.com/16x16/aaa/fff">
</button>

截屏：

标签： htmlcss

Answer 1

这解决了这个问题，使第一个图像display:none悬停时，第二个图像从 更改display:none为display:inline-block。

.page-btn-icon {
  vertical-align: middle;
  width: 36px;
  height: 36px;
  margin: 0 4px;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 18px;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  outline: 0 none !important;
}

.page-btn-icon .icon {
  width: 16px;
  height: 16px;
}

.page-btn-icon .img-top,
.page-btn-icon:hover .icon {
  display: none;
}

.page-btn-icon:hover .img-top {
  display: inline-block;
}

<button class="page-btn-icon">
  <img class="icon" src="https://dummyimage.com/16x16/fff/aaa">
  <img class="icon img-top" src="https://dummyimage.com/16x16/aaa/fff">
</button>

我会摆脱这两个图像，并根据悬停状态翻转按钮的背景图像。干净多了。

.page-btn-icon {
  vertical-align: middle;
  width: 36px;
  height: 36px;
  margin: 0 4px;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 18px;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  outline: 0 none !important;
  background-image: url('https://dummyimage.com/16x16/fff/aaa');
  background-position: center center;
  background-repeat: no-repeat;
}

.page-btn-icon:hover {
  background-image: url('https://dummyimage.com/16x16/aaa/fff');
}

<button class="page-btn-icon">
</button>