我是新手与CSS和HTML的工作,我一直试图创建一个使用CSS和HTML的工具提示,到目前为止已经成功。但现在想知道如果可能的话,如何使此工具提示仅在单击时出现。并在再次点击时消失。下面是我使用的HTML代码。如果有人能提供一些CSS建议,让我能够创造出想要的结果,那就太棒了
HTML
class=‘tooltip’style ='color:#585858;文本装饰:无;‘>桌面NG信息
提前感谢
发布于 2018-12-21 04:55:27
要切换工具提示,可以使用复选框的:checked伪类。
.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>
发布于 2014-05-02 16:40:18
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
}
尝试这将正常工作和onlcik事件不支持在css中。
https://stackoverflow.com/questions/23423841
复制相似问题