javascript - 如何让这个链接在这个元素上工作？

Question

我想知道如何让链接/a href 处理框内的文本？我不确定是什么导致链接不起作用/无法正常工作。如果可能的话，我想保留动画，不确定这是否是导致链接无效的原因。提前感谢您的帮助!

这是我的 html 和 css:

.sign a {
    text-decoration: none;
    cursor: pointer;
    
}
s
.sign a:hover {
    color:aqua;
}

.sign {
    position: relative;
    vertical-align: top;
    margin: 0 auto;
    z-index: -10;
    margin-top: 10px;
    display: inline-block;
  /* sign width */
  width: 150px;
  /* Give it a white border */
  border: 5px solid #fff;
  /* pad content text away from the edges of the sign */
  padding: 1em 1em .75em;
  /* give it a drop shadow and inset shadow at the top */
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 5px 10px rgba(0, 0, 0, 0.4);
  /* setup a default background red and a red gradient where supported */
  background-color: #a1cdad;
  //background: linear-gradient(top, #ff9696 0%, #c80000 100%);
  /* attempt to get rid of jaggies when rotated */
  transform-style: preserve-3d;
  backface-visibility: hidden;
  /* nice rounded corners */
  border-radius: 15px;
  /* set the swing origin (nail body) */
  transform-origin: 50% -65px;
  /* animate the swing with pendulum-style easing */
  animation: swing 1.5s infinite alternate ease-in-out;
}
.sign:hover {
  /* Hover over the sign to stop the animation */
  animation-play-state: paused;
}
.sign p {
  /* Typography */
  /* let's have uppercase.. */
  text-transform: uppercase;
  /* bold... */
  font-weight: bold;
  /* white... */
  color: #fff;
  /* centered text */
  text-align: center;
/*  text-shadow: 0 0 2px rgba(0,0,0,1);*/
  margin: 0 auto;
  line-height: normal;
}

.one P {
  font-size:1.5em;
  line-height:1.5em;
    font-family: 'Open Sans', sans-serif;
}


.sign IMG {
  display:block;
  width:3.5em;
  margin:auto;
}

.sign:before {
  /* string */
  position: absolute;
  content: "";
  /* string thickness/color */
  border: 2px dotted #444;
  /* hide string after connection with sign */
  border-bottom: none;
  border-left: none;
  /* string 'size' (as a -45deg rotated square) */
  width: 100px;
  height: 100px;
  /* string position */
  top: -55px;
  left: 50%;
  margin-left: -50px;
  /* string construct */
  transform: rotate(-45deg);
  /* string curved round nail body (unseen) */
  border-radius: 0 5px 0 0;
}
.sign:after {
  /* nail */
  position: absolute;
  content: "";
  /* nail head size */
  width: 10px;
  height: 10px;
  /* nail head as a circle */
  border-radius: 50%;
  /* nail position */
  top: -75px;
  left: 50%;
  margin-left: -4px;
  /* nail head default color + gradient (where supported) */
  background: #4c4c4c;
  background: linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
}
/* sign swinging animation sequence */
@keyframes swing {
  0% { transform: rotate(-3deg) }
  100% { transform: rotate(3deg) }
}

 <div class="sign one">
     <a href="#"><p>start my<br>order</p></a>
 </div>   
            

Answer 1

根本原因是 .sign 上的 z-index: -10 将所有内容移至背景。 a 上缺少 z-index，这使得它隐藏在绝对定位的元素后​​面。

查看更新后的代码段:

.sign a {
    text-decoration: none;
    cursor: pointer;
    position:relative; z-index:1;
}

.sign a:hover {
    color:aqua;
}

.sign {
    position: relative;
    vertical-align: top;
    margin: 0 auto;
    /* z-index: -10; */
    margin-top: 70px;
    display: inline-block;
  /* sign width */
  width: 150px;
  /* Give it a white border */
  border: 5px solid #fff;
  /* pad content text away from the edges of the sign */
  padding: 1em 1em .75em;
  /* give it a drop shadow and inset shadow at the top */
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 5px 10px rgba(0, 0, 0, 0.4);
  /* setup a default background red and a red gradient where supported */
  background-color: #a1cdad;
  //background: linear-gradient(top, #ff9696 0%, #c80000 100%);
  /* attempt to get rid of jaggies when rotated */
  transform-style: preserve-3d;
  backface-visibility: hidden;
  /* nice rounded corners */
  border-radius: 15px;
  /* set the swing origin (nail body) */
  transform-origin: 50% -65px;
  /* animate the swing with pendulum-style easing */
  animation: swing 1.5s infinite alternate ease-in-out;
}
.sign:hover {
  /* Hover over the sign to stop the animation */
  animation-play-state: paused;
}
.sign p {
  /* Typography */
  /* let's have uppercase.. */
  text-transform: uppercase;
  /* bold... */
  font-weight: bold;
  /* white... */
  color: #fff;
  /* centered text */
  text-align: center;
/*  text-shadow: 0 0 2px rgba(0,0,0,1);*/
  margin: 0 auto;
  line-height: normal;
}

.one P {
  font-size:1.5em;
  line-height:1.5em;
    font-family: 'Open Sans', sans-serif;
}


.sign IMG {
  display:block;
  width:3.5em;
  margin:auto;
}

.sign:before {
  /* string */
  position: absolute;
  content: "";
  /* string thickness/color */
  border: 2px dotted #444;
  /* hide string after connection with sign */
  border-bottom: none;
  border-left: none;
  /* string 'size' (as a -45deg rotated square) */
  width: 100px;
  height: 100px;
  /* string position */
  top: -55px;
  left: 50%;
  margin-left: -50px;
  /* string construct */
  transform: rotate(-45deg);
  /* string curved round nail body (unseen) */
  border-radius: 0 5px 0 0;
}
.sign:after {
  /* nail */
  position: absolute;
  content: "";
  /* nail head size */
  width: 10px;
  height: 10px;
  /* nail head as a circle */
  border-radius: 50%;
  /* nail position */
  top: -75px;
  left: 50%;
  margin-left: -4px;
  /* nail head default color + gradient (where supported) */
  background: #4c4c4c;
  background: linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
}
/* sign swinging animation sequence */
@keyframes swing {
  0% { transform: rotate(-3deg) }
  100% { transform: rotate(3deg) }
}

<div class="sign one">
     <a href="#"><p>start my<br>order</p></a>
 </div>