我已经把社交媒体图标在我的页脚为“跟着我”一节。现在,我想这里有这样的提示https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_bottom,每个人会弹出一个文本“脸谱”,“推特”等。
我如何与我已经有了,因为我不想搞砸了我的页脚和尝试这是我的社交媒体图标实现这一目标。有没有一种方法来挤压<span class="tooltiptext">
吗?或者以此为ID标签?我想尝试这样的事情,例如。
<a href="#" class="fa fa-facebook" id="tooltiptext"></a>
这可能吗?
任何提示和技巧,将不胜感激。随意运行的代码片段,看看我的社交媒体图标看起来像此刻。
/* Footer aka a copyright + social media pages */
.footer {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
/* Height of the footer */
background-color: #b3b3ff;
}
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Use half of the width (120/2 = 60), to center the tooltip */
}
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}
.fa-snapchat {
background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer">
<div class="tooltip">
<!-- Now where should I place "tooltiptext" -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-snapchat"></a>
</div>
</div>
你应该在.tooltip
代替<a>
这是<div>
的父母已经使用.tooltiptext
.footer {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
/* Height of the footer */
background-color: #b3b3ff;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook:hover .tooltiptext {
background: #3B5998;
color: white;
visibility: visible;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}
.fa-snapchat {
background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="script.js"></script>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer">
<div>
<!-- Now where should I place "tooltiptext" -->
<a href="#" class="fa fa-facebook tooltip"><span class="tooltiptext">Facebook</span></a>
<a href="#" class="fa fa-twitter tooltip"><span class="tooltiptext">Twitter</span></a>
<a href="#" class="fa fa-linkedin tooltip"><span class="tooltiptext">Linkedin</span></a>
<a href="#" class="fa fa-instagram tooltip"><span class="tooltiptext">Instagram</span></a>
<a href="#" class="fa fa-snapchat tooltip"><><span class="tooltiptext">Snapchat</span></a>
</div>
</div>
</body>
</html>
我尝试添加以下到您的代码和工作原理:
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Use half of the width (120/2 = 60), to center the tooltip */
}
.fa-facebook:hover .tooltiptext {
visibility: visible;
}
<a href="#" class="fa fa-facebook">
<span class="tooltiptext">Facebook</span>
</a>