时间戳

首页 > 解决方案 > “父”元素的边框落后于 :after-element

html - “父”元素的边框落后于 :after-element

问题描述

我正在创建一个带有按钮形状阴影的透明轮廓按钮。问题是按钮的边框在:after元素后面。见下文。

如果我添加overflow: hidden到切换按钮类，我可以看到完整的边框，但“阴影”不会超出边框。大纲确实有点用，但在点击、聚焦等事件时会被删除。因此，如果可能的话，我想使用边框。

编辑：我删除了z-index: 1它，当按钮没有嵌套在 div 内（带有背景颜色）时它工作。

.background-color {
    background-color: red;
    height: 250px;
    width: 250px;
}

.toggle-button {
    padding: 10px 25px;
    background-color: transparent;
    border: 3px solid #000000;
    position: relative;
    z-index: 1;
    top: 0;
    left: 0;
    transition: all .2s ease;
}
    .toggle-button:hover {
        left: 4px;
        top: 4px;
    }

    .toggle-button:after {
        background-color: #eeeeee;      
        width: 100%;
        height: 100%;
        position: absolute;
        left: 6px;
        top: 6px;
        z-index: -1;
        content: "";
        box-sizing: content-box;
        transition: all .2s ease;
    }

    .toggle-button:hover:after {
        left:0px;
        top: 0px;
    }
<div class="background-color">
    <button class="toggle-button">Toggle me</button>
</div>

标签： htmlcss

解决方案

div {
    background: red;
    position: relative;
    z-index: 0;
    padding: 20px;
}
.toggle-button {
    padding: 10px 25px;
    background-color: transparent;
    border: 3px solid #000000;
    position: relative;
    top: 0;
    left: 0;
    transition: all .2s ease;
}
    .toggle-button:hover {
        left: 4px;
        top: 4px;
    }

    .toggle-button:after {
        background-color: #eeeeee;      
        width: 100%;
        height: 100%;
        position: absolute;
        left: 6px;
        top: 6px;
        z-index: -1;
        content: "";
        box-sizing: content-box;
        transition: all .2s ease;
    }

    .toggle-button:hover:after {
        left:0px;
        top: 0px;
    }
<div>
<button class="toggle-button">Toggle me</button>
</div>

推荐阅读