如何在此示例中悬吊按钮时使所有工具提示都可见?

I came across this pen which is a really cool floating share button. Here's the link:

我偶然发现了这支笔，它是一个很酷的浮动共享按钮。这是链接:

http://codepen.io/koenigsegg1/pen/pjeJvb

HTML

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>

In the demo, you can see that if you hover on the share button, the other buttons pop up, and each button has a different tooltip.

在演示中，您可以看到，如果您悬停在共享按钮上，其他按钮就会弹出，每个按钮都有不同的工具提示。

Now, what I want to do is make all those tooltips visible as soon as the share button is hovered, instead of displaying them when that particular button is hovered. Is it possible to do using pure css? I can't seem to figure it out.

现在，我要做的是让所有的工具提示在共享按钮悬空时显示出来，而不是在特定按钮悬空时显示它们。是否可以使用纯css?我好像弄不明白。

1 个解决方案

#1

It is simply a matter of toggling the visibility value of the CSS elements for [tooltip] attribute.

只需为[tooltip]属性切换CSS元素的可见性值。

Also, remove the [tooltip]:hover:before and [tooltip]:hover:after properties.

另外，删除[工具提示]:hover:before和[工具提示]:hover:after properties。

@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>

#1