仅显示/隐藏淡入淡出的文本 css答案

【问题标题】：show/hide fading text css only仅显示/隐藏淡入淡出的文本 css
【发布时间】：2020-02-02 03:20:26
【问题描述】：

我想显示/隐藏段落的一部分，如下所示：

开始看起来像这样：

► 这是带有淡入淡出文本的段落的开头
点击左侧的“插入符号”后，如下所示：

▼ 这是段落的开头，淡化文本不再淡化，其余内容显示。
点击向下的“插入符号”后，返回：

► 这是带有淡入淡出文本的段落的开头

当我想到这可能会有这样的工作？

<div class="partial-text"><a href="">&#9658; This is the start of the paragraph with <style=”fadingCSS”> fading text</style></a></div>

<div class="full-text"><a href="">&#x25BC; This is the start of the paragraph with fading text no longer fading and the rest of the content shown.</a></div>

我需要帮助的 CSS

显示/隐藏适当的 div
删除所有链接格式
渐变样式 CSS

我看过以下内容，但无法拼凑：

这有点超出我的能力，所以如果有人愿意提供帮助，将不胜感激！

【问题讨论】：

能否发个代码示例？
它看起来像一个基本的 html details 标签。但是，您想要一些额外的漂亮，您可以很好地确定需求但没有做出努力，这看起来就像只是为某人做您的工作？就我个人而言，我将从用于切换的复选框/标签开始，并使用伪元素来更改 :checked 状态的图标和文本。尝试一下，当你遇到困难时再回来:)
我真的很努力。我已经尝试了大约 3 个小时来解决这个问题。 details 方法似乎不起作用，因为我发现的示例总是包含一个
并且我想附加文本 - 本质上。鉴于我的技能，我能做的最好的事情就是寻找类似的例子并尝试让它们发挥作用。也许这不是像我这样的人的正确论坛？如果是这种情况，请告诉我。

标签： show-hide

【解决方案1】：

<details> 标签不是一个结构化的 HTML 元素，所以我认为用它破解你想要的东西真的不可能。

Here's an implementation 使用复选框和同级选择器，这样做的（众多）缺点之一是您必须同时定义摘要和完整段落。不过，这个或类似的 CSS only 应用程序并不是我真正推荐做的事情。它们的可扩展性不是很好，依赖于特定的 HTML 结构，并且如果没有很好的文档记录，就很难理解。

【讨论】：

太棒了。远远超出我的预期。我将尝试找出褪色的部分，但即使我做不到，我想我也可以让它对我有用。感谢 eMontielG！

【解决方案2】：

好的，我的工作已经足够满足我的目的了。我不得不修改 eMontilG 的代码，因为它与 WordPress 不“玩得很好”。下面是代码。

HTML

<label class="show-hide">
<input type="checkbox" class="input-checkbox"/>
<span class="less-text">
&#9658;This is the start of the paragraph with fading text...
</span>
<span class="more-text">
&#x25BC;This is the start of the paragraph with fading text no longer fading and the rest of the content shown.
</span>
</label>

CSS

.show-hide {
display: flex;
}
.input-checkbox {
display: none;
}
.less-text {
display: block;
}
.more-text {
display: none;
}
.input-checkbox:checked ~ .less-text {
display: none;
}
.input-checkbox:checked ~ .more-text {
display: block;
}
.input-checkbox:not(:checked) ~ .less-text {
display: block;
}
.input-checkbox:not(:checked) ~ .more-text {
display: none;
}

我知道这不是“非常可扩展并且依赖于特定的 HTML 结构”，正如 eMontilG 正确指出的那样，但它确实有效。

【讨论】：