时间戳

首页 > 解决方案 > 如何使用悬停使 h1 可以增大但不覆盖我的底部文本或移动页面

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

问题描述

现在，显示“Pulse”的#title:hover 文本的大小正在增加，但也会在页面下方移动。例如，当悬停使我的文本变大时，脉冲图片和滚轮会向下移动。我似乎无法增加脉搏文本的大小，同时没有覆盖底部的“有心人”文本，也没有同时移动页面。

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

请帮忙！谢谢你！

代码：

<!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;
}

标签： htmlcsshover

解决方案

悬停实际上有效，但是因为您正在更改悬停时的高度，所以对象会变大，如果您向后移动一个小，它现在不在悬停时离开对象，所以它会停止，为了解决这个问题，请尝试将 H1 与我在示例中制作的背景我添加了一个带有类 heder 的 div 并像这样放置你的 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>

推荐阅读