Всплывающая подсказка - PullRequest
Новая
       14

Всплывающая подсказка

3 голосов
/ 10 апреля 2019

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

Кроме того, если бы у меня было это исчезновение слева направо от кнопки, это включало бы 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>

1 Ответ

2 голосов
/ 10 апреля 2019

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

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

Что касается анимации слева направоЯ полагаю, что вы можете сделать это с помощью анимации 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>
...