javascript - 如何阻止按钮上的动画影响按钮的悬停或一般功能

Question

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

如何修复这个错误？我想在鼠标悬停时保持按钮完好无损。并正常运行

#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 选择器明确定位按钮，以便只要鼠标悬停在按钮上，就会触发悬停？ 标签 > a > .inner:hover {opacity: .6;}。这里的想法是，你的 CSS 选择器越精细，它优先于任何其他继承的晦涩 CSS 的机会就越大(尽管最终，与大多数 CSS 问题一样，它会优先于任何其他被继承的模糊 CSS)。归根结底是反复试验，以及一些有根据的猜测)。