html - 不用 JavaScript 替换元素-6ren

html - 不用 JavaScript 替换元素

转载作者：行者123 更新时间：2023-11-28 17:26:05

27

4

为简洁起见，请引用 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/

27

4

0

文章推荐： html - 如何在 SCSS 中设置数据占位符属性的样式？

文章推荐： python - Python 中的函数式中缀实现

文章推荐： javascript - 加载脚本时显示 'Loading' 图标

php - 如何用 "a"替换 "d"，用 "b"替换 "e"，用 "c"替换 "f"，。 . . "x"和 "a"， "y"和 "b"， "z"和 "c"？
我想对一个字符串执行搜索和替换，比如 password。正如您从问题中了解到的那样，替换后的字符串应变为 sdvvzrug。但不幸的是，下面的代码输出bbbbcaab: $search = ran
Python future 化而不用 old_div 替换/替换
我正在使用 futurize --stage2它应用了许多源代码转换以使代码 python2 和 python3 兼容。其中一个修复是所有分区 a/b 都替换为 old_div(a/b)，我想避免这种
read.csv 用 `?` 替换 `.` 等列名字符，用 `-` 替换 `...`
我正在使用 RStudio，但我在控制台上的输出被截断了。我找不到如何停止截断(我尝试搜索 ?options 以及在谷歌上搜索的时间比我想承认的要长)。编辑:我向大家道歉!我最初的长名称为“This
android - 替换、添加、替换 fragment ，然后导航后退按钮不适用于第一个 fragment
我有一个 fragment 堆栈，我在其中使用替换和相加。添加或替换我的 fragment 的代码(在我的 Activity 中)如下 private fun addFragment(fragment
javascript - 在 javascript 变量上一次性用 %20 替换/替换 ""和 ""？
我在一个数组中插入了一些字符串，但在我这样做之前，我想按照主题所说的去做。只用 %20 替换空格，我这样做: Name.push(linkText.replace(" ", "%20")); 但是我如
Java - StringBuilder 替换()显示错误 : method String. 替换(char，char)不适用
我正在尝试编译和测试我在网上看到的代码 Expanding an IP add 。但是，当我尝试编译它时，我收到有关 StringBuilder 替换方法的错误。它说: IPadd.java:52:
用 dplyr 中的 data_frame() 替换 data.frame 并用 bind_cols() 替换 cbind
我正在尝试使用 dplyr 的最新功能重写我的部分代码，方法是将 data.frame() 替换为 data_frame() 和 cbind() 与 bind_cols(): library(rgeo
替换()与 "[<-"？
我最近偶然发现了 replace()和 "[ x.tst s.tst s.tst [,1] [,2] [,3] [1,] 0 0 0
Vim 替换
我一直想知道，如何在给定的参数内进行替换。如果你有这样的一行: 123,Hello,World,(I am, here), unknown 你想更换 World与 Foobar那么这是一个简单的任务
java:替换 "with\"
如何转义字符串中的双引号？例如， input: "Nobody" output: \"Nobody\" 我尝试过这样的操作，但不起作用: String name = "Nobody"; name.r
JavaScript 替换
我正在做类似的事情: SQL sql sQl SqL var ps = document.getElementsByTagName('p'); for(var i = 0; i 但它不会替换文本。
javascript - 替换 "with\"
我正在尝试用 \" 替换所有 " 并用 JSON 解析字符串，但浏览器抛出错误 SyntaxError: JSON Parse error: Unrecognized token '\'. 下面是代码
Javascript 替换
大家好，在这里挣扎...... 是否可以将第一个正斜杠之间的任何内容替换为“”，但保留其余部分？例如var 将是 string "/anything-here-this-needs-to-be-re
JavaScript 替换
在下面的代码中，JavaScript 替换函数中的 alert(a) 将提醒匹配的字符串，在本例中，将是 {name} 和 {place}。这按照文档 javascript docs 的描述工作，即
MySQL 替换
+-----------------------------+ | tables | +-------------------
Java 替换 "with\"
我正在尝试用\"替换包含 "的字符串，下面是我尝试过的程序 String s="\"/test /string\""; s = s.replaceAll("\"", "\\\"");
JavaScript 替换？
var text = "a's ..a's ...\"... "; text = convert(text); function convert( text ) { var n = text
JavaScript 替换()
我正在尝试使用 JavaScript 中的替换函数，但有一个问题。 strNewDdlVolCannRegion = strNewDdlVolCannRegion.replace(/_existing
Javascript 替换
好吧，首先我对我的上一篇文章感到非常抱歉，但我真的需要帮助，我会把我真正想要的东西放在一个更清晰的代码中。我不擅长 javascript，所以希望你能帮助我。
Python拆分、替换
我正在写一张纸条，遇到了障碍。可能有更有效的方法来执行此操作，但我对 Python 还很陌生。我正在尝试创建用户生成的 IP 地址列表。我正在使用 print 来查看生成的值是否正确。当我运行此代码时

首页

博学

6Ren·AI

商城

html - 不用 JavaScript 替换元素