我偶然发现了这支笔，它是一个非常酷的 float 共享按钮。这是链接:
http://codepen.io/koenigsegg1/pen/pjeJvb
HTML
@import url(https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500);
body {
background: #00BCD4;
min-height: 100vh;
overflow: hidden;
font-family: Roboto;
color: #fff;
}
h1 {
font: 200 60px Roboto;
text-align: center;
}
p.credits {
text-align: center;
margin-top: 100px;
}
.credits img {
border-radius: 50%;
width: 100px;
}
.container {
bottom: 0;
position: fixed;
margin: 1em;
right: 0px;
}
.buttons {
box-shadow: 0px 5px 11px -2px rgba(0, 0, 0, 0.18), 0px 4px 12px -7px rgba(0, 0, 0, 0.15);
border-radius: 50%;
display: block;
width: 56px;
height: 56px;
margin: 20px auto 0;
position: relative;
-webkit-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.buttons:active,
.buttons:focus,
.buttons:hover {
box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
}
.buttons:not(:last-child) {
width: 40px;
height: 40px;
margin: 20px auto 0;
opacity: 0;
-webkit-transform: translateY(50px);
-ms-transform: translateY(50px);
transform: translateY(50px);
}
.container:hover .buttons:not(:last-child) {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
margin: 15px auto 0;
}
/* Unessential styling for sliding up buttons at differnt speeds */
.buttons:nth-last-child(1) {
-webkit-transition-delay: 25ms;
transition-delay: 25ms; background-image: url('http://cbwconline.com/IMG/Share.svg'); background-size: contain; } .buttons:not(:last-child):nth-last-child(2) { -webkit-transition-delay: 50ms; transition-delay: 20ms; background-image: url('http://cbwconline.com/IMG/Facebook-Flat.png');
background-size: contain; } .buttons:not(:last-child):nth-last-child(3) { -webkit-transition-delay: 75ms; transition-delay: 40ms; background-image: url('http://cbwconline.com/IMG/Twitter-Flat.png'); background-size: contain; } .buttons:not(:last-child):nth-last-child(4)
{
-webkit-transition-delay: 100ms; transition-delay: 60ms; background-image: url('http://cbwconline.com/IMG/Google%20Plus.svg'); background-size: contain; } /* Show tooltip content on hover *
[tooltip]: before {
bottom: 25%;
font-family: arial;
font-weight: 600;
border-radius: 2px;
background: #585858;
color: #fff;
content: attr(tooltip);
font-size: 12px;
visibility: hidden;
opacity: 0;
padding: 5px 7px;
margin-right: 12px;
position: absolute;
right: 100%;
white-space: nowrap;
}
[tooltip]:hover:before,
[tooltip]:hover:after {
visibility: visible;
opacity: 1;
}<body>
<h1>Simple Share FAB</h1>
<p class="credits">
<a href="http://codepen.io/koenigsegg1" target="_blank">
<img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/343394/profile/profile-80_3.jpg" />
</a>
<br />Pen by Kyle Lavery (@koenigsegg1)</p>
<nav class="container">
<a href="#" class="buttons" tooltip="Google+"></a>
<a href="#" class="buttons" tooltip="Twitter"></a>
<a href="#" class="buttons" tooltip="Facebook"></a>
<a class="buttons" tooltip="Share" href="#"></a>
</nav>
</body>在演示中，您可以看到如果将鼠标悬停在分享按钮上，会弹出其他按钮，并且每个按钮都有不同的工具提示。
现在，我想要做的是在悬停共享按钮时立即显示所有这些工具提示，而不是在悬停该特定按钮时显示它们。可以使用纯 css 吗？我似乎无法弄清楚。
最佳答案
只需切换 [tooltip] 属性的 CSS 元素的可见性值即可。
此外，删除 [tooltip]:hover:before 和 [tooltip]:hover:after 属性。
@import url(https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500);
body {
background: #00BCD4;
min-height: 100vh;
overflow: hidden;
font-family: Roboto;
color: #fff;
}
h1 {
font: 200 60px Roboto;
text-align: center;
}
p.credits {
text-align: center;
margin-top: 100px;
}
.credits img {
border-radius: 50%;
width: 100px;
}
.container {
bottom: 0;
position: fixed;
margin: 1em;
right: 0px;
}
.buttons {
box-shadow: 0px 5px 11px -2px rgba(0, 0, 0, 0.18), 0px 4px 12px -7px rgba(0, 0, 0, 0.15);
border-radius: 50%;
display: block;
width: 56px;
height: 56px;
margin: 20px auto 0;
position: relative;
-webkit-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.buttons:active,
.buttons:focus,
.buttons:hover {
box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
}
.buttons:not(:last-child) {
width: 40px;
height: 40px;
margin: 20px auto 0;
opacity: 0;
-webkit-transform: translateY(50px);
-ms-transform: translateY(50px);
transform: translateY(50px);
}
.container:hover .buttons:not(:last-child) {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
margin: 15px auto 0;
}
/* Unessential styling for sliding up buttons at differnt speeds */
.buttons:nth-last-child(1) {
-webkit-transition-delay: 25ms;
transition-delay: 25ms;
background-image: url('http://cbwconline.com/IMG/Share.svg');
background-size: contain;
}
.buttons:not(:last-child):nth-last-child(2) {
-webkit-transition-delay: 50ms;
transition-delay: 20ms;
background-image: url('http://cbwconline.com/IMG/Facebook-Flat.png');
background-size: contain;
}
.buttons:not(:last-child):nth-last-child(3) {
-webkit-transition-delay: 75ms;
transition-delay: 40ms;
background-image: url('http://cbwconline.com/IMG/Twitter-Flat.png');
background-size: contain;
}
.buttons:not(:last-child):nth-last-child(4) {
-webkit-transition-delay: 100ms;
transition-delay: 60ms;
background-image: url('http://cbwconline.com/IMG/Google%20Plus.svg');
background-size: contain;
}
/* Show tooltip content on hover */
[tooltip]:before {
bottom: 25%;
font-family: arial;
font-weight: 600;
border-radius: 2px;
background: #585858;
color: #fff;
content: attr(tooltip);
font-size: 12px;
/*
visibility: hidden;
opacity: 0;
*/
padding: 5px 7px;
margin-right: 12px;
position: absolute;
right: 100%;
white-space: nowrap;
}<body>
<h1>Simple Share FAB</h1>
<p class="credits">
<a href="http://codepen.io/koenigsegg1" target="_blank">
<img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/343394/profile/profile-80_3.jpg" />
</a>
<br />Pen by Kyle Lavery (@koenigsegg1)</p>
<nav class="container">
<a href="#" class="buttons" tooltip="Google+"></a>
<a href="#" class="buttons" tooltip="Twitter"></a>
<a href="#" class="buttons" tooltip="Facebook"></a>
<a class="buttons" tooltip="Share" href="#"></a>
</nav>
</body>关于html - 在此示例中，当按钮悬停时如何使所有工具提示可见？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40329812/