Question

我对叠加淡入淡出的问题感到困惑，以覆盖某些JS代码生成的块。

以下是该作品的链接。如果单击任何一个大陆，将生成一堆带有国家标志的块。您还会看到显示“某些内容”的灰色栏。理想情况下，我希望隐藏该栏，直到我点击其中一个旗帜。此时，叠加层将滑过旗帜。然后当我点击块外的其他地方时，叠加层会滑出并消失。

我试着设置：

&__block-overlay {
  ....
  opacity: 0;
  ....
}

和

&__block-overlay:active {
  opacity: 0.7;
}

但它没有用。

任何建议都将不胜感激!!

Answer 1

这里要解决两个问题。首先是隐藏了“一些内容”。酒吧。您可以通过在父级上设置overflow: hidden来实现这一点，这样它们只有在标志上时才可见：

&__block {
  display: inline-block;
  width: 25%;
  margin: 0.5%;
  height: 150px;
  text-align: center;
  position: relative;
  cursor: pointer;
  border-radius: 5px;
  overflow: hidden; /* add this */

然后，要在连续点击时切换内容可见性，请使用toggleClass()代替addClass()：

blockClicked(e) {
  const $block = $(e.target.closest('.js-block'));
  $('.details-open').removeClass('details-open');
  $block.toggleClass('details-open');
},

Updated CodePen

内容块叠加在点击时淡入/淡出

1 个答案: