锚无法在 flexbox 项目中激活

Question

我有一个容纳多个项目的弹性容器。我在锚标记内设置弹性项目 class 并尝试在用户单击锚定元素时启用 link 工作。

该元素是一个 3 阶段 div...第一个 div 是一个带有图标的圆圈，"second" div（如果你想调用它是第二个 div...) 加载 ::before 伪元素，该元素将一些维度加载到圆。第三个 div 是悬停该项目时出现的文本项目。

问题是，当您将鼠标悬停在该元素上时，我无法单击 link 上的关注。我的猜测是锚点被 divs 覆盖了。

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

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/

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

Answer 1

解决方法其实很简单，我相信你会因为没有发现而责怪自己！我很惊讶我花了这么长时间。

问题是您在 anchor 上使用 src 而您应该使用 href

有关 HTML Links

的更多信息

锚无法在 flexbox 项目中激活

Anchor fails to activate in flexbox item

html

css

anchor

flexbox