0
我們使用工具提示在顏色選擇器上顯示顏色名稱。隱藏工具提示懸停？
您可以在這裏看到的結果：www.printnil.com
不幸的是，提示無法正常工作真的很好。
問題是，當光標位於顏色選擇器的中間，並且將光標移動到 的另一種顏色時，工具提示不會消失。
如果您懸停新顏色或工具提示，我們需要找到隱藏工具提示的解決方案。
... 我們試着向上移動工具提示，所以我們在顏色和工具提示之間找到了一點距離。但是，如果您更快地移動鼠標，就能捕捉到過渡效果。
也許某些JavaScript？
/** Color Swatches **/
.swatch {
float: left;
width: 100%;
margin: 0px 0px 10px 0px;
}
.swatch .header {
margin: 0.5em 0;
}
.swatch input {
display:none;
}
.swatch label {
width: 100%;
height: 40px;
float:left;
margin:0;
}
.swatch-element label {
cursor: pointer;
}
.swatch .swatch-element {
width: 20%;
height: 40px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float:left;
-webkit-transform:translateZ(0);
-webkit-font-smoothing:antialiased;
position:relative;
}
.swatch input:checked + label {
text-align: center;
width: 100%;
}
.swatch input:checked + label:before {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\e607";
line-height: 40px;
font-size: 15px;
color: #fff;
background: rgba(0,0,0,0.45);
padding: 6px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.swatch .tooltip {
font: normal 12px sans-serif;
text-align:center;
background: #27282b;
color:#fff;
bottom:100%;
padding: 10px;
display:block;
position:absolute;
width:140%;
left: -20%;
margin-bottom:15px;
filter:alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
opacity:0;
visibility:hidden;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 10000;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.swatch .tooltip:before {
bottom:-20px;
content:" ";
display:block;
height:20px;
left:0;
position:absolute;
width:100%;
}
.swatch .tooltip:after {
border-left:solid transparent 10px;
border-right:solid transparent 10px;
border-top:solid #27282b 10px;
bottom:-9px;
content:" ";
height:0;
left:50%;
margin-left:-13px;
position:absolute;
width:0;
}
.swatch .swatch-element:hover .tooltip {
filter:alpha(opacity=100);
-khtml-opacity:1;
-moz-opacity:1;
opacity:1;
visibility:visible;
-webkit-transform:translateY(0px);
-moz-transform:translateY(0px);
-ms-transform:translateY(0px);
-o-transform:translateY(0px);
transform:translateY(0px);
}
/** Color Swatches **/