Отображение текста внутри кнопки при наведении курсора

Question

Я хочу отображать какой-то текст внутри кнопки, но только когда он наведен, используя HTML или CSS.

Когда кнопка не наведена, основной текст - это заголовок (I уже что-то работает), и когда вы наводите на него указатель мыши, заголовок перемещается вверх, и появляется некоторый дополнительный текст, например описание и небольшое «Посетите >>» в конце.

I ' Я разместил свой код и то, что мне нужно, на странице кода здесь (и в конце этого сообщения): https://codepen.io/floksyyt/pen/WNrVjJd

Спасибо за вашу помощь в будущем!

.btn {
  opacity: 0.6;
  border-radius: 8px;
  background-color: #f4511e;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 100%;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.btn span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.btn span:after {
  content: "\00bb";
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.btn:hover span {
  padding-right: 25px;
}

.btn:hover span:after {
  opacity: 1;
  right: 0;
}

.btn:hover {
  opacity: 1;
}

<h1>Bienvenue chez Floksy !</h1>
    <h2>Vous vous trouvez actuellement sur la plateforme de s&eacute;lection de sous-site internet de Floksy.</h2>
    <table width="100%">
      <tr>
        <td width="5%"></td>
        <td width="25%">
          <center>Pour venir voir mon profil professionnel ainsi que mes gros projets
        </td>
        <td width="2.5%"></td>
        <td width="25%">
          <center>Si vous souhaitez d&eacute;couvrir ou en apprendre plus sur mes aventures sur Youtube et Twitch
        </td>
        <td width="2.5%"></td>
        <td width="25%">
          <center>Si vous veniez &agrave; propos de mes services d'informatique et &eacute;lectronique
        </td>
        <td width="5%"></td>
      </tr>
      <tr>
        <td></td>
        <td>
          <center><button class="btn" onclick="window.location.href='somewhere';"><span>Espace Professionnel </span></button>
        </td>
        <td></td>
        <td>
          <center><button class="btn" onclick="window.location.href='somewhere';"><span>Espace Cr&eacute;ation Web </span></button>
        </td>
        <td></td>
        <td>
          <center><button class="btn" onclick="window.location.href='somewhere';"><span>Espace Services </span></button>
        </td>
        <td></td>
      </tr>
    </table>
    <p>Example for one button :<br /><br />
      Title<br />(always visible)
      <hr>
      Description<br />(only visible by hover button)
      <hr>
      Visit >><br />(only visible by hover button)
    </p>

Answer 1

Есть несколько способов выполнить sh вашу задачу (при условии, что я понимаю цели проекта). Один из способов - использовать события onmouseover и onmouseout на кнопке

Второй способ - использовать JS для изменения присвоения классов скрытых сообщений. Это также достигается с помощью тех же событий, что и раньше, за исключением того, что они назначаются прослушивателю событий элемента через функцию addEventListener, назначенную элементам кнопки.

Вот пример обоих методов.

Вторая и третья кнопки используют JS для достижения эффекта. Сообщение, которое будет отображаться при наведении на вторую кнопку Сообщение, которое будет отображаться при наведении третьей кнопки console.clear (); const hoverShow = (IDS) => {document.getElementById (IDS + 'Msg'). classList.remove ('hide')}; const hoverHide = (IDS) => {document.getElementById (IDS + 'Msg'). classList.add ('hide')}; функция init () {let sel = document.querySelectorAll ('input [type = button]'); for (let el of sel) {el.addEventListener ('mouseover', функция (событие) {hoverShow (event.currentTarget.id)}, false); el.addEventListener ('mouseout', функция (событие) {hoverHide (event.currentTarget.id)}, ложь); } } в этом();