Question

我有一个小元素的问题，它不能正确传播点击和悬停在兄弟链接（同一个父节点）上。这里的问题

html是一个div，包含不同的按钮，子div中的文本和链接以及背景中溢出div的徽标：

<div class="main">
  <div>
     <!-- ... -->
  </div>
  <div class="super-link">
     <span />
     <a href="/#/stuff" />
  </div>
</div>

风格（ sass风格）：

.main {
    overflow: hidden;
    &:before {
        display: block;
        position: absolute;
        content: '';
        bottom: -35%; right: -35%;
        width: 110%; height:110%;
        background-image: url('../img/logo.svg');
        background-size: 100% 100%;
        opacity:0.1;
    }

    .super-link {
        span {
            // ...
        }
        a {
            // ...
        }
    }
 }

我会尝试提供一个小提琴，但有了这个，有没有人有同样的问题？

Answer 1

事实上，即使我不完全理解这里发生了什么，我也找到了解决方案：

.super-link {
   display:inline-block; // or block
   position:relative;
}

将链接放在：before元素之前（绝对定位）。

绝对定位：在伪元素之前占据子链接的焦点

1 个答案: