Is there a possible way to fix the hover selector triggering over and under the text because of the-CodePudding

As you can see in the CSS below, I have the height set to "50vh" which is causing the hover selector to be triggered underneath and over the text rather than just on the text. I have tried to lower the height but it moves the text upwards. Is there a way to stop it from triggering unless the cursor is over the actual text while still keeping the text lowered?

body {
  background-color: #efefef;
  overflow: hidden;
}

.logo h1 {
  align-items: center;
  color: #262626;
  display: flex;
  font-family: 'Lato', sans-serif;
  font-size: 72px;
  font-weight: 700;
  height: 50vh;
  justify-content: center;
  max-width: 100px;
  margin: auto;
}

.logo h1:hover {
  color: #FFFFFF
}

<!DOCTYPE html>
<html>

<head>

  <title>
    Bindex. | Home
  </title>

  <link rel="icon" type="image/x-icon" href="favicon.png">
  <link rel="stylesheet" href="index.css">
  <meta charset="UTF-8">

  <body>

    <div >
      <h1>
        B.
      </h1>
    </div>

  </body>

</html>

CodePudding user response：

Give this a try. You should set the flex properties on the parent div only, and not the h1. This way, you can manipulate the height of the h1 and the width in which the :hover is activated.

body {
  background-color: #efefef;
  overflow: hidden;
}

.logo {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  color: #262626;
  font-family: 'Lato', sans-serif;
  font-size: 72px;
  font-weight: 700;
  height: fit-content;
  width: fit-content;
}

.logo h1:hover {
  color: #FFFFFF
}

<!DOCTYPE html>
<html>

<head>

  <title>
    Bindex. | Home
  </title>

  <link rel="icon" type="image/x-icon" href="favicon.png">
  <link rel="stylesheet" href="index.css">
  <meta charset="UTF-8">
</head>

<body>

  <div >
    <h1>
      B.
    </h1>
  </div>

</body>

</html>