1

私はhtmlとcssの学習を始めたばかりで、自分が何をしているのか完全にはわかりませんが..

:hover トランジションを追加して、ヘッダー "FIENDS" にカーソルを合わせると、#000000 から #800000 にフェードします。私が実装したものと機能するもの。css :active も追加したので、ヘッダー "FIENDS" をクリックすると、すぐに #800000 から #ffffff に切り替わります。しかし、現時点では、すぐに切り替わるわけではなく、:hover 用に設定したトランジションを使用して #ffffff にフェードしているようです。誰にもこれに対する解決策がありますか？

ありがとう。

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Fiends</title>
        <link href="style.css" type="text/css" rel="stylesheet" />
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta name="description" content="Fiends" />
</head>
<body>
    <div>
        <h1 class="centertext"><fade>FIENDS</fade></h1>
    </div>
</body>
<html>

CSS

html {
    background-color: #ffffff}

body {
    font-family: bebas neue;
    text-align: center;}

h1 {
    color: #000000;
    font-weight: normal;
    font-size: 200px;
    letter-spacing: 15px;}

h1.centertext {
    margin: 225px auto auto auto}

fade { 
    color: #000000; 
    -webkit-transition: color .12s linear;
    -moz-transition: color .12s linear;
    -ms-transition: color .12s linear;
    -o-transition: color .12s linear;
    transition: color .12s linear;}

fade:hover {
    color: #800000;}

fade:active {
    color: #ffffff}
4

1 に答える 1