Question

为简洁起见，请参阅my template（您的网络浏览器可能会对该网站提供误报）的描述，fiddle我的代码块和我的HTML示例文件。

<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。从技术上讲，第四个（现在称为＆＃34; read_more＆＃34;）将在视觉上替换latest_article_lede。无论data_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的位置属性，但结果也不令人满意（另外，我记得绝对定位与动画不兼容）。我搜索谷歌，知道我是否可以在latest_article_lede上找到它的大小，位置和对齐参数而根本没有找到任何令人满意的答案（尽管确保Flex属性可以提供帮助）。

...在我计划添加动画之后（主要是不仅仅是褪色效果），已经有了这些动画。动画，如前所述，并不真正使用Content属性。

任何撒玛利亚人都要救我这个？非常感谢帮助。

Answer 1

一个简单的解决方案是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>

没有JavaScript替换元素

1 个答案: