我有一个按钮(箭头),它具有悬停效果,旨在显示其下方的文本。我无法让它工作 - 一切都准备好了,当我检查它时它就在那里,但它不可见。
任何帮助,将不胜感激
/*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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句