Question

我正在实施一个“打开音乐播放器”按钮，将音乐播放器滑入视图。滑动在我的实际项目代码中工作正常，但悬停状态给我带来了问题。

具体要求：

按钮的不透明度默认为0.8，悬停时为1
按钮的父元素需要在较小的屏幕上旋转并在音乐播放器上方摆动，但背景图像需要保持相同的方向。为实现此目的，我将背景样式应用于父{Q}}伪元素。
更新：附加要求按钮在点击时旋转180度，因此背景图像（我使用before进行模拟）无法与按钮本身耦合。：（

如果我注释掉linear-gradient样式，悬停就可以了。但当它们出现时，它们似乎会干扰按钮的悬停状态，使其闪烁，有时甚至完全消失。

谢谢！

Answer 1

如果主要元素是三角形而伪元素是背景，则用户可能会遇到闪烁效果。以下是代码中的相关部分：

&:before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: purple;
}

.open-player-btn {
  margin: 15px;
  border-style: solid;
  border-width: 20px 0 20px 34px;
  border-color: transparent transparent transparent orange;
  .hover-opacity;
}

尝试更改放置伪元素的元素。这是经过修改的代码：

.open-player-btn {
  width: 100%;
  height: 100%;
  background: purple;
  .hover-opacity;

  &:before {
    content: "";
    position: absolute;
    display: block;
    margin: 15px;
    border-style: solid;
    border-width: 20px 0 20px 34px;
    border-color: transparent transparent transparent orange;
  }
}

更新：

如果我没有弄错，箭头应该面向打开状态，但渐变应该保持不变。如下更改CodePen上的度数似乎可以解决问题。

&.open {
  .open-player-btn-wrapper {
    transform: rotate(90deg);
  }

  .open-player-btn {
    transform: rotate(-90deg);
    &:before { transform: rotate(180deg); }
  }
}

::在伪元素干扰子悬停状态之前

1 个答案: