时间戳

首页 > 解决方案 > 可点击的“显示隐藏”文本或剧透的最小（最短）HTML

javascript - 可点击的“显示隐藏”文本或剧透的最小（最短）HTML

问题描述

是的，有无数的问题和页面解释了如何使用 html、css 和（可选）javascript 来创建类似的东西，名称如下：

但是我还没有找到这个问题的答案：

是否可以创建CSS以使类似于此的内容（尽可能小的html片段）在单击时充当切换/扰流器？

<div class="hint">The answer starts with an A</div>

如果不可能……没关系！问题是这是否可能——我只是想知道。

我已经知道悬停时可以使用的准系统解决方案：

<div title="The answer starts with an A. (This is shown when hovered.)">

但是解决方案必须是可点击的，因为它会显示在手机上，而“悬停”不存在。

CSS 可以很长，但html必须尽可能短。html必须是准系统的原因是我将手动输入很多次。我不在乎它是 adiv还是 aspan或指定了哪些字段，只要它很短。

作为解决方案的一部分，任何地方都不能有任何其他html 。那是因为在这个系统中，我每次都必须输入所有的html ，而我可以免费获得 CSS。

它甚至不必是真正的切换：我关心的是它开始隐藏并在单击时显示。

提前感谢您的见解！

标签： javascripthtmlcsstexttoggle

解决方案

TL;DR： 自定义属性的最小 CSS 版本tooltip（您可以选择其他名称）：

[tooltip]:active::after {
    content: attr(tooltip);
}
<div tooltip="This is tooltip">some div</div>

更复杂的解决方案
您可以为自定义属性创建规则并添加before（用于工具提示的箭头）和after（用于工具提示的主体）伪元素。
preudo 元素的默认不透明度设置为 0。当具有自定义属性的元素处于活动状态时，将不透明度设置为 1。
（来源：纯 css 工具提示教程）

div{
margin: 0.5em 15em;
}

[tooltip]{
  position:relative;
  display:inline-block;
}
[tooltip]::before {
    content: "";
    position: absolute;
    top:-6px;
    left:50%;
    transform: translateX(-50%);
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: rgba(0,0,0,0.7) transparent transparent     transparent;
    z-index: 99;
    opacity:0;
}

[tooltip-position='left']::before{
  left:0%;
  top:50%;
  margin-left:-12px;
  transform:translatey(-50%) rotate(-90deg) 
}
[tooltip-position='top']::before{
  left:50%;
}
[tooltip-position='bottom']::before{
  top:100%;
  margin-top:8px;
  transform: translateX(-50%) translatey(-100%) rotate(-180deg)
}
[tooltip-position='right']::before{
  left:100%;
  top:50%;
  margin-left:1px;
  transform:translatey(-50%) rotate(90deg)
}

[tooltip]::after {
    content: attr(tooltip);
    position: absolute;
    left:50%;
    top:-6px;
    transform: translateX(-50%)   translateY(-100%);
    background: rgba(0,0,0,0.7);
    text-align: center;
    color: #fff;
    padding:4px 2px;
    font-size: 12px;
    min-width: 80px;
    pointer-events: none;
    padding: 4px 4px;
    z-index:99;
    opacity:0;
}

[tooltip-position='left']::after{
  left:0%;
  top:50%;
  margin-left:-8px;
  transform: translateX(-100%)   translateY(-50%);
}
[tooltip-position='top']::after{
  left:50%;
}
[tooltip-position='bottom']::after{
  top:100%;
  margin-top:8px;
  transform: translateX(-50%) translateY(0%);
}
[tooltip-position='right']::after{
  left:100%;
  top:50%;
  margin-left:8px;
  transform: translateX(0%)   translateY(-50%);
}

[tooltip]:active::after,[tooltip]:active::before {
   opacity:1
}
<div tooltip="This is left tooltip" tooltip-position="left">tooltip on left</div>
<div tooltip="This is right tooltip" tooltip-position="right">right tooltip</div>
<div tooltip="This is bottom tooltip" tooltip-position="bottom">bottom tooltip</div>
<div tooltip="This is tooltip">tooltip without position attribute</div>

推荐阅读