我有一个按钮(箭头)，它具有悬停效果，可以在其下方显示文本。我无法让它工作 - 一切都已准备就绪，它可以显示，当我检查它时它就在那里，但它只是不可见。
任何帮助将不胜感激
/*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>最佳答案
这是打字错误，悬停时更改#myBtn 而不是.myBtn
#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>关于html - 文本不会显示在按钮下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55630446/