当箭头上出现悬停时,我一直试图让这个文字淡入淡出。没有运气,并且已经坚持了一段时间 - 会感激任何帮助。
此外,如果我从按钮的左侧到右侧淡入,那将包括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>