启动屏幕标题上的悬停属性会导致标题向上平移吗？

Question

Answer 1

我看到您遇到的两个主要问题是：

您的 Flexbox 样式位于 H1 样式内部，而不是 H1 容器内部。 Flexbox 样式会影响容器以及容器应如何与其内部的项目交互，而不是单独影响每个项目（从广泛的角度来看）
您正在使用转换样式，该样式在触发时会抛出转换。相反，我使用边距将飞溅放在正确的位置，这解决了您的标题问题。

.container{
    background: darkgoldenrod;
    height: 100vh;
    width: 100%;
    display: grid;
}
.splash{
    cursor: none;
    background: black;
    height: 100%;
    width: 100%;
    top: 50%;
    right: 50%;
    margin-top: -300px;
    margin-bottom: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hidden{
    transition: 2.0s;
    display: none;
}
.splash-header{
    color: white;
    transition: all ease-in-out 0.6s;
}
.splash-header:hover{
    transform: scale(1.5);
}
.frontlogo{
    height: 90%;
    color: white;
    display: flex;
    justify-content: center;
    align-content: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QuiZA</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
     <div class="container">
        <h1 class="frontlogo">QuiZA Logo </h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit ducimus libero culpa ipsum cupiditate quasi accusantium quibusdam soluta, dolorem iure sapiente ut consectetur cum minus id repellat amet perspiciatis fuga?</p>
        <!--Loading screen will start after this-->
      <div class="splash">
        <h1 class="splash-header">Press Here...</h1>
    </div>
</div>
  
</body>
</html>

启动屏幕标题上的悬停属性会导致标题向上平移吗？

问题描述投票：0回答：1

1个回答

最新问题

启动屏幕标题上的悬停属性会导致标题向上平移吗？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1