如何使用悬停使 h1 可以变大但不会覆盖我的底部文本或移动页面

Question

现在，显示 "Pulse" 的 #title:hover 文本的大小正在增加，但也向下移动了页面。例如，当悬停使我的文字变大时，脉冲图片和滚轮向下移动。我似乎无法在不覆盖底部 "the man with the heart" 文本并且同时不移动页面的情况下增加脉冲文本的大小。

我基本上想说的是如何更改悬停文本以扩大尺寸但不将整个页面及其所有元素略微向下移动。

请帮忙！谢谢！

代码：

<!DOCTYPE html>
<script> src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>


<main id="main">
  <h1 class="title">Pulse</h1>
  <p> The Man with the Heart </p>
    <img id="pulse"
          src="https://vignette.wikia.nocookie.net/rainbowsix/images/3/36/Large-pulse.30ab3682.png/revision/latest?cb=20171224002812" alt= "Sexy Bald Man" >


</main>

样式：

html
{
  font-family: Cursive;
}

h1 {
  text-align: center;
  padding: 20px 20px 50px 20px;
  background-color: #FFC44F;
  margin-bottom: 0x;
}


.title:hover {
  color:red;
  padding: 0px;
  margin: 0px;
  font-size: 100px;
}

p{
  margin-top: -70px;
  text-align: center;
}

img{
  display:block;
  height: auto;
  max-width: 100%;
}

#pulse {
  padding: 10px;
  margin: -100px -20px 0px -20px;
}

Answer 1

悬停确实有效，但是因为你在悬停时改变了高度，所以对象变大了，如果你向后移动了一点，它现在不在悬停时离开了对象，所以它停止了，为了解决这个问题，尝试将 H1 与背景分开，就像我在示例中所做的那样，我添加了一个 div 和 class heder，并像这样放置你的 H1 样式，它应该只取决于 H1 词。

看看...

<!DOCTYPE html>
    <head>
    <style>

    html{  font-family: Cursive;}

    .heder {
      text-align: center;
      padding: 20px 20px 50px 20px;
      background-color: #FFC44F;
      margin-bottom: 10px;
    }


    .title:hover {
      color:red;
      padding: 20px 20px 50px 20px;
      margin: 0px;
      transform: scale(1.1);
    }

    p{
      margin-top:-30px;
      text-align: center;
    }

    img{
      height: auto;
      max-width: 100%;
    }

    #pulse {
      padding: 10px;
      margin: -100px -20px 0px -20px;
    }
    </style>
    </head>
    <main id="main">
        <div class="heder">
      <h1 class="title">Pulse</h1>
      <p> The Man with the Heart </p>
    </div>
        <img id="pulse"
              src="https://vignette.wikia.nocookie.net/rainbowsix/images/3/36/Large-pulse.30ab3682.png/revision/latest?cb=20171224002812" alt= "Sexy Bald Man" >


    </main>

Answer 2

<h1> 中的转换文本覆盖 <p>

中的文本

解决方法如下：

<!DOCTYPE html>
<script> src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<style>

html
{
  font-family: Cursive;
}

.title {
  text-align: center;
  padding: 20px 20px 50px 20px;
  background-color: #FFC44F;
  margin-bottom: 0px;
}


h1:hover {
  color:red;
  transform: scale(1.1);
}

p{
  text-align: center;
  background-color: #FFC44F;
  margin-top: 0;
  padding-bottom: 5px;
}

img{
  display:block;
  height: auto;
  max-width: 100%;
}

#pulse {
  padding: 10px;
  margin: -100px -20px 0px -20px;
}
</style>

<main id="main">
  <div  class="title">
    <h1>Pulse</h1>
  </div>
  <p> The Man with the Heart </p>
    <img id="pulse"
          src="https://vignette.wikia.nocookie.net/rainbowsix/images/3/36/Large-pulse.30ab3682.png/revision/latest?cb=20171224002812" alt= "Sexy Bald Man" >


</main>

如何使用悬停使 h1 可以变大但不会覆盖我的底部文本或移动页面

How to use hover so that the h1 can grow in size but not cover my bottom text or move the page

html

css

hover