Question

当按钮悬停在标签“ Sign Up！”上时消失了。我将color: rgba(32,32,32,1);放置到所选元素.button和::before选择器上（如果.button不起作用）以在按钮顶部显示标签。

在所选元素.button上，我什至放了z-index: 9999，但这也没有帮助。

我唯一注意到的按钮background-color: rgba(255,187,17,1);在::before内部起作用。为什么color:不起作用？

感谢您的智慧！

HTML

<div class="button">SIGN UP!</div>

CSS

.button {
    position: relative;
    color: rgba(32, 32, 32, 1);
    font-size: 30px;
    cursor: pointer;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    width: 250px;
    height: 50px;
    font-family: 'Source Sans Pro', sans-serif;
    margin: auto 0;
    text-align: center;
    padding-top: 10px;
}

.button::before {
    color: rgba(32, 32, 32, 1);
    background-color: rgba(255, 187, 17, 1);
    border-radius: 8px;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; 
    transition: all 0.3s;
}

.button:hover::before {
    opacity: 0;
    transform: scale(0.5, 0.5);
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    border-radius: 8px;
    transition: all 0.3s;
    border: 1px solid #959595;
    transform: scale(1.2, 1.2);
}

.button:hover::after {
    opacity: 1;
    transform: scale(1, 1);
}

Answer 1

您的.button :: before没有任何内容。因此，将颜色应用于空字符串。如果您在其中输入将要着色的内容（https://jsfiddle.net/Lwj24gbp/3/）

.button::before {
    color: rgba(32, 32, 32, 1);
    content: ''; // Try adding some content here. It's going to be the rgba(32, 32, 32, 1) color
}

在选择器不起作用之前使用的按钮顶部的按钮标签

1 个答案: