hitbox of text too big-CodePudding

I have 2 texts on my page and both of them turn white on hover with an animation. But the hitbox of the text is too big in width, which means that it lights up way too soon (when you're not even close to the text). Does anyone know why this is happening?

body {
  margin: 0;
  padding: 0;
}

#page-header {
  padding: 0;
  margin: 0;
  background-color: #1a1a1a;
  height: 65%;
  width: 100%;
  position: absolute;
}

#start-introduction:hover {
  animation-name: changeColor;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

#start-introduction {
  border-style: solid;
  margin: 0;
  margin-top: 15vh;
  font-size: 7vh;
  text-align: center;
  font-family: arial;
  color: #262626;
  cursor: default;
  animation-name: reverseColor;
  animation-duration: 0.5s;
}

#introduction:hover {
  animation-name: changeColor;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

#introduction {
  border-style: solid;
  margin: 0;
  margin-top: 3vh;
  font-size: 18vh;
  text-align: center;
  color: #262626;
  font-family: arial;
  cursor: default;
  animation-name: reverseColor;
  animation-duration: 0.5s;
}

@keyframes changeColor {
  from {
    color: #262626;
  }
  to {
    color: white;
  }
}

@keyframes reverseColor {
  from {
    color: white;
  }
  to {
    color: #262626;
  }
}

<div id="page-header">
  <p id="start-introduction">test test</p>
  <h1 id="introduction">{Test test}</h1>
</div>

CodePudding user response：

Ok, a few things to go over. I'm going to make a few assumptions here and see if this helps. Paragraphs <p> and Headers h1 are block level elements this means they will always span the width of their containing element which in your case is <div id="page-header">. So when you say that you want an animation to take place when you :hover an element that includes the entire element. The point I am trying to make is: if you only want the animation to take place when you hover the text. You need to make the element only as wide as the text. In this case I place them both in their own containers and make those containers display flex so the elements inside are no longer block level elements and can easily be placed in the center using justify content.

On a side note I would be careful using Viewport height vh as a unit of measurement for margins and font size. I understand you want your font sizes to be responsive but using viewport height is too risky and your numbers could end up being all over the place unless you are 100% sure that everyone will have the same size screen and it will always be full size. I personally use em and/or rem for my font sizes and margins because em is based on the parent element font size or rem which is based on the document font size.

body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
}

#page-header {
  padding: 0;
  margin: 0;
  background-color: #1a1a1a;
  height: 65%;
  width: 100%;
  position: absolute;
}

#start-introduction:hover {
  animation-name: changeColor;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

#start-introduction {
  border-style: solid;
  margin: 0;
  margin-top: 15vh;
  font-size: 7vh;
  text-align: center;
  font-family: arial;
  color: #262626;
  cursor: default;
  animation-name: reverseColor;
  animation-duration: 0.5s;
}

#introduction:hover {
  animation-name: changeColor;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

#introduction {
  border-style: solid;
  margin: 0;
  margin-top: 3vh;
  font-size: 18vh;
  text-align: center;
  color: #262626;
  font-family: arial;
  cursor: default;
  animation-name: reverseColor;
  animation-duration: 0.5s;
}

@keyframes changeColor {
  from {
    color: #262626;
  }
  to {
    color: white;
  }
}

@keyframes reverseColor {
  from {
    color: white;
  }
  to {
    color: #262626;
  }
}

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="index.css" />
  <title>TestTest</title>
</head>

<body>
  <div id="page-header">
    <div >
      <p id="start-introduction">test test</p>
    </div>
    <div >
      <h1 id="introduction">{Test test}</h1>
    </div>
    
    
  </div>
</body>

CodePudding user response：

Have you tried giving it a width? Also, the font size of the above 'test text' and '{Test test}' texts are not equal.