Наведите всплывающую подсказку

Я пытался сделать так, чтобы этот текст исчезал при наведении курсора на стрелку. Не повезло и застрял на нем на некоторое время - буду признателен за любую помощь.

Кроме того, если бы у меня было это исчезновение слева направо от кнопки, включало бы это JS?

.fa-long-arrow-alt-left {
  display: none; 
  position: absolute; 
  top: 3vh; 
  left: 3vw; 
  z-index: 99; 
  border: none; 
  outline: none; 
  background: none; 
  color: black; 
  cursor: pointer; 
  padding: 15px; 
  font-size: 18px; 
}

.return-text {
  visibility: hidden;
  width: 120px;
  color: black;
  text-align: center;
  justify-content: center;
  
  /* Position the tooltip */
  position: relative;
  z-index: 1;
  left: 20%;

}

#return:hover {
  color: red;
}

#return:hover .return-text {
  visibility: visible;
  transition: 1s ease-in-out;
}

<html>
<head>
	<title>Hector's Portfolio</title>
	<link rel = "stylesheet" type = "text/css" href = "css/style.css">
	<!-- Linking social icons -->
	<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity = "sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin = "anonymous">
</head>

<body>
<button id = "return" class = "fas fa-long-arrow-alt-left"><span class = "return-text">Return</span>	
</button>
</body>

html css fadein

10.04.2019 16:33

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Добавьте переход непрозрачности, так как вы не можете изменить видимость или отображение.

У вас есть переходы, поэтому просто добавьте непрозрачность.

Что касается анимации слева направо, я считаю, что вы можете сделать это с анимацией css, взгляните на этот пример: CSS исчезает слева направо

.fa-long-arrow-alt-left {
  display: none;
  position: absolute;
  top: 3vh;
  left: 3vw;
  z-index: 99;
  border: none;
  outline: none;
  background: none;
  color: black;
  cursor: pointer;
  padding: 15px;
  font-size: 18px;
  transition: 0.3s ease;
}

.return-text {
  visibility: hidden;
  opacity: 0;
  width: 120px;
  color: black;
  text-align: center;
  justify-content: center;
  /* Position the tooltip */
  position: relative;
  z-index: 1;
  left: 20%;
}

#return:hover {
  color: red;
}

#return:hover .return-text {
  visibility: visible;
  opacity: 1;
  transition: 1s ease-in-out;
}

<html>

<head>
  <title>Hector's Portfolio</title>
  <link rel = "stylesheet" type = "text/css" href = "css/style.css">
  <!-- Linking social icons -->
  <link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity = "sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin = "anonymous">
</head>

<body>
  <button id = "return" class = "fas fa-long-arrow-alt-left"><span class = "return-text">Return</span>	
</button>
</body>

Здорово, чувак, такое простое решение!

— 10.04.2019 16:43

10.04.2019 16:35