Как использовать наведение так, чтобы h1 мог увеличиваться в размере, но не покрывать мой нижний текст или перемещать страницу - PullRequest
Новая
       7

Как использовать наведение так, чтобы h1 мог увеличиваться в размере, но не покрывать мой нижний текст или перемещать страницу

0 голосов
/ 07 февраля 2020

Прямо сейчас текст #title: hover, который говорит, что «Pulse» увеличивается в размере, но также перемещается вниз по странице. Например, изображение пульса и колесо прокрутки перемещаются вниз, когда при наведении курсора текст увеличивается. Кажется, я не могу увеличить размер импульсного текста, не покрывая нижний текст «человек с сердцем», а также не перемещая страницу одновременно.

В основном я пытаюсь сказать, как я могу изменить текст при наведении, чтобы увеличить его размер, но не сдвинуть всю страницу и все ее элементы немного вниз.

Пожалуйста, помогите! Спасибо!

Код: 

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

Ответы [ 2 ]

0 голосов
/ 07 февраля 2020

Преобразованный текст в <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>
0 голосов
/ 07 февраля 2020

Наведение на самом деле работает, но поскольку вы изменяете высоту при наведении, чтобы объект становился больше, и если вы отодвигаете маленький назад, он теперь находится вне объекта, когда он не находится, поэтому он останавливается. Чтобы это исправить, попробуйте отделить H1 из фона, как я сделал в примере, я добавил 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>
...