时间戳

首页 > 解决方案 > 在选择器不起作用之前使用按钮顶部的按钮标签

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

问题描述

小提琴

当按钮悬停在标签“注册！” 消失。我将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);
}

标签： htmlcsshover

解决方案

您的 .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
}

推荐阅读