html - 如何仅使用 CSS 实现剧透引用？

Question

我有一个像这样的 blockquote:

<blockquote class="spoiler">Soopah sekkrit!</blockquote>

我想隐藏它，只有当用户将鼠标悬停在它上面时才显示它。我现在正在用 JS 来做:

blockquote.addEventListener('mouseover', function() {
    this.style.height = this.offsetHeight + 'px';
    this.dataset.contents = this.innerHTML;
    this.innerHTML = '';
});
blockquote.addEventListener('mouseout', function() {
    this.style.height = '';
    this.innerHTML = this.dataset.contents;
});

有没有更好的方法来做到这一点，使用 CSS？

它必须保持其background-color、大小，并适用于具有自定义颜色的内容。如果可能的话，我还想制作动画，让内容逐渐淡入。

Answer 1

这与我在 SOUP 中使用的非常相似:

.spoiler, .spoiler > * { transition: color 0.5s, opacity 0.5s }
.spoiler:not(:hover) { color: transparent }
.spoiler:not(:hover) > * { opacity: 0 }
/* fix weird transitions on Chrome: */
blockquote, blockquote > *:not(a) { color: black }

.spoiler, .spoiler > * { transition: color 0.5s, opacity 0.5s }
.spoiler:not(:hover) { color: transparent }
.spoiler:not(:hover) > * { opacity: 0 }
/* fix weird transitions on Chrome: */
blockquote, blockquote > *:not(a) { color: black }

/* some basic bg styles for demonstration purposes */
blockquote { background: #fed; margin: 1em 0; padding: 8px; border-left: 2px solid #cba }
code { background: #ccc; padding: 2px }
img { vertical-align: middle }

<blockquote class="spoiler">
  Soopah sekkrit text with <code>code</code> and <a href="#">links</a> and <img src="//sstatic.net/stackexchange/img/logos/so/so-logo-med.png" width="100" /> images!
  <p>You can also have paragraphs in here.</p>
  <ul><li>And lists too!</li></ul>
  <blockquote class="spoiler">Even nested spoilers work!</blockquote>
</blockquote>

这比 your own solution 稍微简单一些，并适用于任意内容，包括图像甚至嵌套剧透! (参见上面的演示片段。)

唉，如果剧透的任何子元素有 color: inherit，这个方法似乎会在 Chrome 上遇到奇怪的过渡效果。 . (基本上，发生的情况是这些元素的文本颜色均设置为透明，不透明度设置为 0。由于不透明度以乘法方式组合，因此组合过渡将显得较慢 - 在淡入淡出的一半 -其中，当元素本身的不透明度为 50% 时，其中的 text 的不透明度为 50% × 50% = 25%。)我在上面的示例中添加了一个额外的 CSS 规则来修复但这确实让事情变得有点复杂。

---

我实际上在 SOUP 中做的事情略有不同。我将每个扰流板的内容包裹在一个额外的内部 <div> ，这让我可以将 CSS 进一步简化为:

.spoiler > div { opacity: 0; transition: opacity 0.5s }
.spoiler:hover > div { opacity: 1 }

.spoiler > div { opacity: 0; transition: opacity 0.5s }
.spoiler:hover > div { opacity: 1 }

/* some basic bg styles for demonstration purposes */
blockquote { background: #fed; margin: 1em 0; padding: 8px; border-left: 2px solid #cba }
code { background: #ccc; padding: 2px }
img { vertical-align: middle }

<blockquote class="spoiler"><div>
  Soopah sekkrit text with <code>code</code> and <a href="#">links</a> and <img src="//sstatic.net/stackexchange/img/logos/so/so-logo-med.png" width="100" /> images!
  <p>You can also have paragraphs in here.</p>
  <ul><li>And lists too!</li></ul>
  <blockquote class="spoiler"><div>Even nested spoilers work!</div></blockquote>
<div></blockquote>

此方法的主要优点是简单和稳健:我不必使用 :not()选择器，提高与旧浏览器的兼容性，以及 transition样式不能与剧透 内部 元素上可能定义的其他过渡冲突。这种方法也不会受到上述 Chrome 上的颜色过渡异常的影响，因为它只使用不透明度过渡。

总的来说，这是我推荐的方法。当然，缺点是您需要包含额外的 <div> s 在您的 HTML 中。

---

Ps. 请考虑提供一些方法使扰流板永久可见，特别是对于可能发现很难将光标“悬停”在元素上的触摸屏用户。一个简单的解决方案是使用 JavaScript 单击事件处理程序来切换 spoiler。类，例如像这样(使用 jQuery):

$('.spoiler').on( 'click', function (e) {
  $(this).toggleClass('spoiler');
  e.stopPropagation();
} );

$('.spoiler').on( 'click', function (e) {
  $(this).toggleClass('spoiler');
  e.stopPropagation();
} );

.spoiler > div { opacity: 0; transition: opacity 0.5s }
.spoiler:hover > div { opacity: 1 }

/* some basic bg styles for demonstration purposes */
blockquote { background: #fed; margin: 1em 0; padding: 8px; border-left: 2px solid #cba }
code { background: #ccc; padding: 2px }
img { vertical-align: middle }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<blockquote class="spoiler"><div>
  Soopah sekkrit text with <code>code</code> and <a href="#">links</a> and <img src="//sstatic.net/stackexchange/img/logos/so/so-logo-med.png" width="100" /> images!
  <p>You can also have paragraphs in here.</p>
  <ul><li>And lists too!</li></ul>
  <blockquote class="spoiler"><div>Even <a href="//example.com">nested</a> spoilers work!</div></blockquote>
<div></blockquote>

或者，如果您更喜欢使用委托(delegate)事件处理(这样您就不必在每次通过 Ajax 加载包含剧透的新内容时都不断添加新的点击处理程序):

$(document).on( 'click', '.spoiler, .spoiler-off', function (e) {
  $(this).toggleClass('spoiler').toggleClass('spoiler-off');
  e.stopPropagation();
} );

$(document).on( 'click', '.spoiler, .spoiler-off', function (e) {
  $(this).toggleClass('spoiler').toggleClass('spoiler-off');
  e.stopPropagation();
} );

.spoiler > div { opacity: 0; transition: opacity 0.5s }
.spoiler:hover > div { opacity: 1 }

/* some basic bg styles for demonstration purposes */
blockquote { background: #fed; margin: 1em 0; padding: 8px; border-left: 2px solid #cba }
code { background: #ccc; padding: 2px }
img { vertical-align: middle }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<blockquote class="spoiler"><div>
  Soopah sekkrit text with <code>code</code> and <a href="#">links</a> and <img src="//sstatic.net/stackexchange/img/logos/so/so-logo-med.png" width="100" /> images!
  <p>You can also have paragraphs in here.</p>
  <ul><li>And lists too!</li></ul>
  <blockquote class="spoiler"><div>Even <a href="//example.com">nested</a> spoilers work!</div></blockquote>
<div></blockquote>

(这些应该适用于上面显示的任一 CSS 变体。)