为简洁起见，请引用 my template 的描述(您的网络浏览器可能会给您关于该网站的误报)，fiddle用我的一大块代码和我的 H.T.M.L 示例制作。文件。
<html>
<!--[…]-->
<body>
<!--[…]-->
<article>
<div class="latest_article_preview">
<img class="latest_article_thumbnail" src="16x9_ratioed_picture.jpg" width="222" height="124"></img>
<div class="latest_article_headline">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="latest_article_lede">
Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehi
</div>
<div class="read_more">
Read more…
</div>
</div>
</article>
<!--[…]-->
</body>
</html>
每个 latest_article_preview 在视觉上都包含三个子部分:latest_article_thumbnail、latest_article_headline 和 latest_article_lede。从技术上讲，还有第四个(现在称为“read_more”)应该在视觉上取代 latest_article_lede。 只要 latest_article_preview 被光标悬停，latest_article_lede 将被 read_more 取代。 不过，read_more 不是文章页面的链接，因为整个 latest_article_preview 框都是可点击的(甚至在动画过渡结束之前)。
这必须用 vanilla C.S.S. 编写，因为我知道有两种方法可以进行这种交互:
- z-index 转换技巧。
- 内容替换。
我首先尝试了内容替换。当我将它与动画结合时，它非常失败，我去尝试 z-index 转换技巧。
我最初避免使用该技巧的原因是我觉得它很脏。无论如何我还是选择了它。但我遇到了一些问题:如何使 read_more 灵活框与 latest_article_lede 框占用完全相同的空间？我尝试了 C.S.S. 的 Position 属性，但结果也不令人满意(另外，我记得绝对定位与动画不兼容)。 我在 Google 上进行了搜索，想知道我是否可以根据 latest_article_lede 的大小、定位和对齐参数，但没有找到任何令人满意的答案(尽管我确信 Flex 属性可以提供帮助)。
…在我计划添加动画之后(主要是淡入淡出效果)，已经有了。如前所述，动画并不真正符合 Content 属性。
有哪位好心人能帮我解决这个问题吗？非常感谢您的帮助。
最佳答案
一个简单的解决方案是 pointer-events 和 opacity 的组合:
section {
width: 200px;
border: 1px solid black;
}
section div {
min-height: 200px;
padding: 20px;
position: relative;
perspective: 1000px;
}
section div:after {
content: 'Read more...';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255, 255, 255, 0.8);
line-height: 200px;
text-align: center;
opacity: 0;
pointer-events: none;
transition: all .2s;
transform: translateZ(200px);
}
section div:hover:after {
opacity: 1;
transform: translateZ(0);
pointer-events: auto;
}<section>
<h1>Headline</h1>
<div class="content">Lorem Ipsum Dolor sit Amet!</div>
</section>关于html - 不用 JavaScript 替换元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27192856/