Question

如何让动画内的按钮保持原样？如果您运行下面的代码片段，您就会知道我的意思，按钮放在动画内部，我没有发布完整的片段，只是为了给您一个想法，当悬停在这个动画上时，假设按钮是在动画中心内部，按钮悬停不会激活，或者无法单击，除非鼠标位于按钮中的某个角度。

如何修复此错误？当我完好无损时，我想保留按钮。并正常运作

#crosshair {
  width: 260px;
  height: 60px;
  position: relative;
}

.lBracket,
.rBracket,
.lBracket::before,
.lBracket::after,
.rBracket::before,
.rBracket::after,
.cross,
.cross:after {
  background: rgb(0,0,0);
}

.crosshairBlock,
.crosshairBlock1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  position: absolute;
}

.crosshairBlock {
  justify-content: center;
}

.crosshairBlock1 {
  justify-content: space-between;
}

.crosshairBlock1:hover {
  animation: rotateBlock 6s infinite linear;
  cursor: crosshair;
}

.lBracket,
.rBracket {
  width: 2px;
  height: 100%;
  position: relative;
}

.lBracket::before,
.lBracket::after,
.rBracket::before,
.rBracket::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 15px;
}

.lBracket::before {
  top: 0;
}

.lBracket::after {
  bottom: 0;
}

.rBracket::before {
  top: 0;
  right: 0;
}

.rBracket::after {
  bottom: 0;
  right: 0;
}

.cross {
  height: 30px;
  position: relative;
  width: 2px;
}

.cross:after {
  content: "";
  height: 2px;
  left: -14px;
  position: absolute;
  top: 14px;
  width: 30px;
  animation: rotateY 4s infinite linear;
}

@keyframes rotateY {
  to { transform: rotateY(360deg); }
}

@keyframes rotateBlock {
  to { transform: rotateY(-360deg); }
}

<div id="crosshair">	
  <div class="crosshairBlock">
    <div class="cross"></div>
  </div>
  <div class="crosshairBlock1">
    <div class="lBracket"></div>
    <div class="rBracket"></div>
  </div>
</div>	
<label id="Signup"><a href="#" class="inner">register</a></label>

Answer 1

您是否尝试过按钮z-index大于十字准线元素？您是否尝试使用CSS选择器明确定位按钮，以便只要鼠标悬停在它上面，悬停就会触发？ label > a > .inner:hover {opacity: .6;}。这里的想法是， CSS选择器越精细，它优先于任何其他隐藏的CSS的可能性就越高（尽管最后，与大多数CSS问题一样，它归结为试验和错误，以及一些有根据的猜测。）

如何通过按钮停止动画一般影响按钮的悬停或功能

1 个答案: