html - anchor 无法在 flexbox 元素中激活

Question

我有一个容纳多个元素的 flex 容器。我在 anchor 标记内设置 flex 元素类，并尝试在用户单击锚定元素时启用链接。

该元素是一个 3 阶段的 div...第一个 div 是一个带有图标的圆圈，“第二个”div(如果您想将其称为第二个 div...)加载::before 伪元素为圆加载一些维度。第三个 div 是悬停该元素时出现的文本元素。

问题是，当您将鼠标悬停在该元素上时，我无法单击后续链接。我的猜测是 anchor 被 div 覆盖了。

我尝试过跨元素设置 z-index，但似乎无法让 anchor 暴露自己

HTML:

 <div class="flex_row">

        <a class="flex_col" src="http://www.cnn.com">
            <div class="circle_shape">
                <i class="fas fa-sitemap"></i>
                <div class="circle_text">
                    <p>CNN IS A TERRIBLE NEW SOURCE!</p>
                </div>
            </div>
            <div>
                <h2>CNN SUCKS</h2>
            </div>
        </a>
</div>

CSS:

.flex_col{
    flex: 1;
    margin: 10px;
}

.circle_shape {
    position: relative;
    display: flex;
    padding: 50% 0;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid gray;
    font-size: 16px;
    font-family: 'Source Sans Pro', sans-serif;
    justify-content: center;
    align-items: center;
   background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
  }

.circle_shape:before {
    content: "";
    position: absolute;
    top: 1%;
    left: 5%;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
    filter: blur(5px);
    z-index: 2;
}


  .circle_shape:hover{
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.1); 
  }

  .circle_shape img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

.circle_shape i{
    position: absolute;
    text-align: center;
    font-size: 4vw;
    text-shadow: 
    0 0 1px #fff, 
    0 1px 2px rgba(0,0,0,0.3);
}

.circle_shape h2 {
    position: absolute;
    bottom: 10%;
    font-size: 1vw; 
    font-weight: 800;
    text-align: center;
}

.circle_text{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,51,102, 0.9);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
}

.circle_text p {
    color: #fff;
    padding: 4px;
    text-align: center;
    font-size: calc(7px + .5vw);
    text-shadow: 
        0 0 1px #fff, 
        0 1px 2px rgba(0,0,0,0.3);
}

.circle_shape:hover .circle_text{
    transform: scale(1);
    opacity: 1;
  }

fiddle :https://jsfiddle.net/honeynutz/czq9y5fp/4/

我希望有问题的链接加载 cnn，但它什么也没做。

Answer 1

解决方案实际上非常简单，我相信您会因为没有发现它而自责!我很惊讶我花了这么长时间。

问题是你在你的 anchor 上使用了 src 而你应该使用 href

有关 HTML Links 的更多信息