我是新手,正在学习CSS和HTML。我一直在尝试使用CSS和HTML创建工具提示,并且已经成功了。但现在想知道如何在单击时显示此工具提示,再次单击时隐藏它。
以下是我使用的HTML代码。如果有人能建议一些CSS来实现所需的结果,那就太好了。
HTML
class='tooltips' style='color:#585858; text-decoration:none;'> desktop NG information
提前感谢。
我是新手,正在学习CSS和HTML。我一直在尝试使用CSS和HTML创建工具提示,并且已经成功了。但现在想知道如何在单击时显示此工具提示,再次单击时隐藏它。
以下是我使用的HTML代码。如果有人能建议一些CSS来实现所需的结果,那就太好了。
HTML
class='tooltips' style='color:#585858; text-decoration:none;'> desktop NG information
提前感谢。
.tooltip {
position: relative;
border-bottom: 1px dotted black;
}
.tooltip span {
visibility: hidden;
width: 10em;
background-color: #000;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 9;
top: -1em;
left: 100%;
margin-left:1em;
opacity: 0;
transition: opacity 1s;
}
.tooltip span::after {
content: "";
position: absolute;
top: 1.5em;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.tooltip input {
display:none;
}
.tooltip input:checked+span {
visibility: visible;
opacity: 1;
}
<p>Hello <label class="tooltip">world<input type="checkbox"><span>and this is the tooltip text displayed on click.</span></label>! I am greeting you.<p>
HTML代码
<a href="#" title="Sample tooltip" class="tooltip">Link</a>
CSS 代码
.tooltip{display:inline;position:relative}
.tooltip:hover{text-decoration:none}
.tooltip:hover:after{
background:#111;
background:rgba(0,0,0,.8);
border-radius:5px;
bottom:18px;
color:#fff;
content:attr(title);
display:block;
left:50%;
padding:5px 15px;
position:absolute;
white-space:nowrap;
z-index:98
}
.tooltip:hover:before{
border:solid;
border-color:#111 transparent;
border-width:6px 6px 0 6px;
bottom:12px;
content:"";
display:block;
left:75%;
position:absolute;
z-index:99
}
:active
伪类;)" - Adam Azad