CSS：在悬停时更改h2的垂直对齐方式

Question

当我将鼠标移到文本上时，我试图改变h2的垂直对齐方式，但它没有做任何事情。

＆＃13;

＆＃13;

    .evening:first-letter {
        vertical-align: 10%;
    }
    
    h2:hover {
        vertical-align: 0% !important;
    }

＆＃13;

    <div>
        <h2 class="evening">Evening</h2>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您只是错过了悬停选择中的:first-letter部分：

＆＃13;

＆＃13;

.evening:first-letter {
    vertical-align: 10%;
}

h2:hover:first-letter {
    vertical-align: 0% !important;
}

＆＃13;

<div>
    <h2 class="evening">Evening</h2>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你忘记了第一个字母的部分

.evening:first-letter {
        vertical-align: 10%;
    }
    
    h2:hover:first-letter {
        vertical-align: 0% !important;
    }

<div>
        <h2 class="evening">Evening</h2>
    </div>

如果你不需要为第一个字符添加任何特殊样式，只能使用一个css。

h2:hover:first-letter {
            vertical-align: 10%;
        }
        

    <div>
            <h2 class="evening">Evening</h2>
        </div>