Html 对于本例，当鼠标悬停按钮时，如何使所有工具提示可见？

我偶然发现了这支钢笔，它是一个非常酷的浮动共享按钮。以下是链接：

HTML

@导入url(https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500);
身体{
背景：#00BCD4；
最小高度：100vh；
溢出：隐藏；
字体系列：Roboto；
颜色：#fff；
}
h1{
字体：200 60像素Roboto；
文本对齐：居中；
}
p、 学分{
文本对齐：居中；
边缘顶部：100px；
}
.img学分{
边界半径：50%；
宽度：100px；
}
.集装箱{
底部：0；
位置：固定；
边缘：1米；
右：0px；
}
.按钮{
盒影：0px 5px 11px-2px rgba（0,0,0,0.18），0px 4px 12px-7px rgba（0,0,0,0.15）；
边界半径：50%；
显示：块；
宽度：56px；
高度：56px；
利润率：20px自动0；
位置：相对位置；
-webkit过渡：所有.1都可以轻松完成；
过渡：所有.1放松；
}
.按钮：活动，
.按钮：焦点，
.按钮：悬停{
盒影：04pxRGBA（0,0,0,14），04px8pxRGBA（0,0,0,28）；
}
.按钮：非（：最后一个子项）{
宽度：40px；
高度：40px；
利润率：20px自动0；
不透明度：0；
-webkit转换：translateY（50px）；
-ms变换：translateY（50px）；
变换：translateY（50px）；
}
.container:悬停。按钮：非（：最后一个子项）{
不透明度：1；
-webkit转换：无；
-ms转换：无；
转化：无；
利润率：15px自动0；
}
/*不同速度下向上滑动按钮的非必要样式*/
.按钮：第n个最后一个子项（1）{
-webkit转换延迟：25ms；
转换延迟：25毫秒；背景图像：url（'http://cbwconline.com/IMG/Share.svg“）；背景大小：contain；}。按钮：not（：last child）：第n个last child（2）{-webkit转换延迟：50ms；转换延迟：20ms；背景图像：url（）http://cbwconline.com/IMG/Facebook-Flat.png');
背景大小：contain；}。按钮：not（：last child）：n last child（3）{-webkit转换延迟：75ms；转换延迟：40ms；背景图像：url（'http://cbwconline.com/IMG/Twitter-Flat.png“）；背景大小：contain；}。按钮：not（：last child）：n个last child（4）
{
-webkit转换延迟：100ms；转换延迟：60ms；背景图像：url（'http://cbwconline.com/IMG/Google%20Plus.svg'）；背景大小：contain；}/*悬停时显示工具提示内容*
[工具提示]：之前{
底部：25%；
字体系列：arial；
字号：600；
边界半径：2px；
背景：#5858；
颜色：#fff；
内容：attr（工具提示）；
字体大小：12px；
可见性：隐藏；
不透明度：0；
填充物：5px7px；
右边距：12px；
位置：绝对位置；
右：100%；
空白：nowrap；
}
[工具提示]：悬停：在，
[工具提示]：悬停：在{
能见度：可见；
不透明度：1；
}

简单共享晶圆厂

Kyle Lavery的笔（@koenigsegg1）

只需切换

[tooltip]

属性的CSS元素的可见性值即可

另外，删除

[tooltip]：hover:before

和

[tooltip]：hover:after

属性

@导入url(https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500);
身体{
背景：#00BCD4；
最小高度：100vh；
溢出：隐藏；
字体系列：Roboto；
颜色：#fff；
}
h1{
字体：200 60像素Roboto；
文本对齐：居中；
}
p、 学分{
文本对齐：居中；
边缘顶部：100px；
}
.img学分{
边界半径：50%；
宽度：100px；
}
.集装箱{
底部：0；
位置：固定；
边缘：1米；
右：0px；
}
.按钮{
盒影：0px 5px 11px-2px rgba（0,0,0,0.18），0px 4px 12px-7px rgba（0,0,0,0.15）；
边界半径：50%；
显示：块；
宽度：56px；
高度：56px；
利润率：20px自动0；
位置：相对位置；
-webkit过渡：所有.1都可以轻松完成；
过渡：所有.1放松；
}
.按钮：活动，
.按钮：焦点，
.按钮：悬停{
盒影：04pxRGBA（0,0,0,14），04px8pxRGBA（0,0,0,28）；
}
.按钮：非（：最后一个子项）{
宽度：40px；
高度：40px；
利润率：20px自动0；
不透明度：0；
-webkit转换：translateY（50px）；
-ms变换：translateY（50px）；
变换：translateY（50px）；
}
.container:悬停。按钮：非（：最后一个子项）{
不透明度：1；
-webkit转换：无；
-ms转换：无；
转化：无；
利润率：15px自动0；
}
/*不同速度下向上滑动按钮的非必要样式*/
.按钮：第n个最后一个子项（1）{
-webkit转换延迟：25ms；
过渡延迟：25ms；
背景图像：url（'http://cbwconline.com/IMG/Share.svg');
背景尺寸：包含；
}
.按钮：非（：最后一个子项）：第n个最后一个子项（2）{
-webkit转换延迟：50ms；
过渡延迟：20ms；
背景图像：url（'http://cbwconline.com/IMG/Facebook-Flat.png');
背景尺寸：包含；
}
.按钮：非（：最后一个子项）：第n个最后一个子项（3）{
-webkit转换延迟：75ms；
过渡延迟：40ms；
背景图像：url（'http://cbwconline.com/IMG/Twitter-Flat.png');
背景尺寸：包含；
}
.按钮：非（：最后一个子项）：第n个最后一个子项（4）{
-webkit转换延迟：100ms；
过渡延迟：60ms；
背景图像：url（'http://cbwconline.com/IMG/Google%20Plus.svg');
背景尺寸：包含；
}
/*悬停时显示工具提示内容*/
[工具提示]：之前{
底部：25%；
字体系列：arial；
字号：600；
边界半径：2px；
背景：#5858；
颜色：#fff；
内容：attr（工具提示）；
字体大小：12px；
/*
可见性：隐藏；
不透明度：0；
*/
填充物：5px7px；
右边距：12px；
位置：绝对位置；
右：100%；
空白：nowrap；
}

简单共享晶圆厂

Kyle Lavery的笔（@koenigsegg1）