html-悬停显示工具提示

我一直在尝试使悬停在箭头上时淡出此文本.没有运气,只能坚持一小会儿,不胜感激.

另外,如果我要从按钮的左到右淡入淡出,那会包括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>

最佳答案

添加不透明度过渡,因为您无法过渡可见性或显示.

您已经设置了过渡,因此只需添加不透明度即可.

至于从左到右的动画,我相信您可以使用CSS动画来做到这一点,请看以下示例：
CSS fade left to right

.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>

html-悬停显示工具提示

相关文章