I have a button (arrow) which has a hover effect in which it is meant to reveal text below it. I can't get it to work - Everything is in place for it to reveal and it is there when I inspect it but it's just not visible.

Any help would be appreciated

/*Arrow Styling and positioning*/
.fa-long-arrow-alt-up {
  display: none; 
  position: fixed; 
  bottom: 200px; 
  right: 20px; 
  z-index: 99; 
  border: none; 
  outline: none; 
  background: none; 
  color: black; 
  cursor: pointer; 
  padding: 15px; 
  font-size: 18px; 
}
/*Arrow Hover*/
#myBtn:hover {
  color: red; 
  transition: 0.5s;
}
/*Positioning and styling of text under button*/
.up-text {
  visibility: hidden;
  width: 120px;
  color: #000;
  text-align: center;
  padding: 5px 0;
  position: absolute;
  z-index: 99;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}
/*Reveals the text when hovered over*/
.myBtn:hover .up-text {
  visibility: visible;
  color: #000;
}
<!DOCTYPE html>
<html>
<head>
 <title>Hector's Portfolio</title>
 <!-- CSS style sheet -->
 <link rel="stylesheet" type="text/css" href="css/style.css">
 <!-- Scaling debending on device -->
  <!-- J-Query style sheet -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <!-- JS style sheet -->
 <script src="js/javascript.js"></script>
<!-- Linking social icons -->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
 <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Button to go to top -->
 <button onclick="topFunction()" id="myBtn" class="fas fa-long-arrow-alt-up"><span class="up-text">Up?</span></button>
</body>

1 Answers

0
Hiren Vaghasiya On Best Solutions

It's typo, Change #myBtn instead of .myBtn when hover

#myBtn:hover .up-text {
  visibility: visible;
  color: #000;
}

/*Arrow Styling and positioning*/
.fa-long-arrow-alt-up {
  display: none; 
  position: fixed; 
  bottom: 200px; 
  right: 20px; 
  z-index: 99; 
  border: none; 
  outline: none; 
  background: none; 
  color: black; 
  cursor: pointer; 
  padding: 15px; 
  font-size: 18px; 
}
/*Arrow Hover*/
#myBtn:hover {
  color: red; 
  transition: 0.5s;
}
/*Positioning and styling of text under button*/
.up-text {
  visibility: hidden;
  width: 120px;
  color: #000;
  text-align: center;
  padding: 5px 0;
  position: absolute;
  z-index: 99;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}
/*Reveals the text when hovered over*/
#myBtn:hover .up-text {
  visibility: visible;
  color: #000;
}
<!DOCTYPE html>
<html>
<head>
 <title>Hector's Portfolio</title>
 <!-- CSS style sheet -->
 <link rel="stylesheet" type="text/css" href="css/style.css">
 <!-- Scaling debending on device -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
  <!-- J-Query style sheet -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <!-- JS style sheet -->
 <script src="js/javascript.js"></script>
<!-- Linking social icons -->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
 <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Button to go to top -->
 <button onclick="topFunction()" id="myBtn" class="fas fa-long-arrow-alt-up"><span class="up-text">Up?</span></button>
</body>