简单CSS实现wordpress资料删除效果

在我们的文章中，可能会涉及到一些不是很希望读者一眼就能看到的内容（比如【剧透】、【神秘代码】），因此需要进行一次隐藏操作。
比如steam的评论系统，介绍ACGN的萌娘百科等等都有这种黑条。
PS.steam上是输入[spoiler]隐藏内容[/spoiler]

当你把鼠标移动到黑色部分：可以看到隐藏的内容。
或者更加保险一点的，只有当你点击按住黑色部分：才可以看到隐藏的内容。
效果大概就是这个样子，使用的是CSS的hover和active选择器，因为太过简单，下面直接上代码。

hide{
    color:black;
    background:black;
    transition: 0.5s;
}
hide:hover{
    color:white;
    transition: 0.5s;
}
hideclick{
    color:black;
    background:black;
    transition: 0.3s;
}
hideclick:active{
    color:white;
    transition: 0.3s;
}

hide标签是自定义的普通隐藏标签，我们将其背景和字体颜色都设置为黑色，这样一般情况下就看不见了。hover是选择鼠标指针位于其上的元素，也就是当我们鼠标位于hide标签上的元素时，修改为此样式，将字体颜色修改为白色。transition是动画缓动效果，这里加上看着更加自然，可以自行调整时间。
hideclick标签是自定义的点击显示标签，同理一般情况下背景字体都为黑色。使用了active选择器，选择鼠标点击的元素，也就是当我们点击hideclick标签的元素时，修改样式，将隐藏的文本显示出来。
html中或者文章中使用方式如下：

<!-- 这里是示例的HTML代码 -->
<hide>移动鼠标就可以看到隐藏的内容</hide>
<hideclick>需要点击才可以看到隐藏的内容</hideclick>。

另外如果想要加上提示效果，添加title属性即可，比如

<hide title="提示文本">隐藏内容</hide>

而在Wordpress中，我们只需要进入自定义页面，在额外css中添加上述配置代码，就可以在文章中使用了，是不是非常的简单呢？不过这个css样式只能隐藏文本哈。同时，通过此种方式进行隐藏，只是为了不进行剧透或者直接显示不太方便的内容，并不是为了进行加密或者什么，你甚至可以通过选择文字的方式直接看到隐藏内容。

ok，今天的简单教程就到这里了，大家可以试试看哈。

本博客不定期更新各方面的技术教程，欢迎各位评论转载，转载请注明出处，喜欢的可以关注点赞哦。