Question

，并且我希望我的代码在悬停在按钮上时可以同时进行两个转换，但是它只会显示文本的颜色，而不是文本周围的框。它会在1.5秒内完成文字处理，但框会立即显示

这是我的html代码

<!DOCTYPE html>
<html>

    <head>
    <link href="https://fonts.googleapis.com/css?family=Gaegu&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="Styles.css">
        <title>About Me</title>
    </head>

    <body>
    <h1>Joels Website Building</h1>
            <a href='About Me.html'>About Me</a>
            <a href='my website.html'>Home</a>
        <div id="div1">

            <h2>About Me</h2>

        </div>
        <p></p>

    </body>

</html>

这是我的CSS代码

    h1 { border-radius: 25px;
  border: 10px solid transparent;
  border-image: url(border.png) 30% round;
    font-family: 'Gaegu', cursive;
    font-weight: 1000;
    text-align:center;
    color:#61D600;
    font-size:50px;
    transform:rotateX(40deg);
      text-shadow: 8px 8px 16px darkblue, 0 0 100px purple, 0 0 20px #4B0082;
      border-radius:50px;
radius:50px;
outline-style: solid;
}

h2 {
    color:#000080;
    text-shadow: 1px 1px 2px #6ed3cf, 0 0 25px #6ed3cf, 0 0 5px #6ed3cf;
}

html{
    background:linear-gradient(to right, #9068be, #6ed3cf, #9068be); 
}

body{
    height: 100vh;
}

*{
    cursor: url(Infinity Gauntlet Snap.cur), default;
}

a{
    font-size:25px;
    color:maroon;
    background:teal;
    transition:background 1500ms ease-in;
    transition:color 1500ms ease-in;
}

a:hover{
    color:yellow;
    background:purple;
    font-size:25px;
}

，并且我希望我的代码在悬停在按钮上时可以同时进行两个转换，但是它只会显示文本的颜色，而不是文本周围的框。它会在1.5秒内完成文字处理，但框会立即显示

CSS悬停过渡无法在我的网站上运行

0 个答案: