个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我在这个 HTML 文档上写了一个故事，我有一个 Javascript 应该将鼠标悬停在上面的任何文本变成完全不透明，但它似乎只是根据起始不透明度将它推到完全不透明的一小部分. hovering 类设置为 1 的不透明度，所以我不明白为什么当文本更改为该类时它不会变得完全不透明。
$(document).ready(function() {
var exceptions = ["lorem", "ipsum", "consectetur", "pharetra"];
$("p").each(function() { //for all paragraphs
var txt = $(this).text() //get text, split it up, add spans where necessary, put it back together
.split(" ")
.map(function(x) {
return exceptions.includes(x.toLowerCase()) ? x : "<span class='hover'>" + x + "</span>"}).join(" ");
$(this).html(txt); //set the text to our newly manipulated text
}).on("mouseover", ".hover", function() {
$(this).addClass("hovering"); //set opacity to 100%
}).on("mouseout", ".hovering", function() {
$(this).attr("class", ""); //set opacity to 0%, remove "hover" events
});
});.hover {
opacity: .2;
}
.hovering {
opacity: 1;
}
span {
transition: opacity 0.5s;
opacity: 0;
}
p {
cursor: default;
}<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "NarrativeTheory.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type = "text/javascript" src="NarrativeTheory.js"></script>
<h1>
Narrative Theory Project
</h1>
</head>
<body>
hover around in the area below...
<br>
<br>
<p class = "hover">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra risus nec maximus rutrum. Vestibulum vulputate, elit ac euismod gravida, felis erat eleifend felis, vel blandit lorem ex sit amet est. Cras luctus bibendum dolor, vel consequat magna.
Morbi pellentesque turpis metus. Pellentesque sit amet erat ex. Integer et nisi nisl. Quisque ornare mollis velit, id elementum elit pharetra at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur
cursus cursus dolor, eu laoreet mauris dapibus vitae. Nunc ac ipsum sit amet diam suscipit lobortis. Nam nec vehicula augue. Cras nec sapien vitae leo gravida vestibulum.
</p>
<p class = "hover">
Etiam viverra bibendum aliquet. Aenean erat ligula, commodo id aliquet vel, eleifend ac orci. Aliquam blandit libero feugiat augue tincidunt, id fringilla lectus aliquam. Nulla ut nisl sit amet nulla feugiat porta. Curabitur euismod, mi vitae luctus facilisis,
est risus ornare erat, sed efficitur justo lorem nec urna. Cras in fringilla dolor. Aliquam faucibus scelerisque nunc, et rutrum quam pharetra ac. Vestibulum velit enim, consequat id nisi in, laoreet feugiat turpis. Phasellus auctor pharetra ultrices.
In ut condimentum lectus. Integer at dui egestas, ultrices metus pulvinar, venenatis mi. Donec vitae mauris viverra, convallis urna sit amet, posuere sapien. Sed quis magna odio. Vivamus mauris ipsum, euismod non sagittis eu, pretium et neque. Nunc
consequat ipsum eget magna facilisis mattis. Nulla eu lorem id tortor faucibus placerat.
</p>
</body>
</html>最佳答案
这是因为您在两个不同级别的同一元素上设置了两次不透明度:
每个<p class="hover">设置为 opacity: .2;
每个<span class="hover">有transition: opacity 0.5s; opacity: 0;
子元素的不透明度与其父元素相关。
所以如果 <p>元素的不透明度为 0.2，并且它有一个子元素 <span>不透明度 1.0，然后 <span> 的不透明度是 1.0 * 0.2 = 0.2。
这很容易通过删除 hover 来解决。来自 <p> 的类(class)元素，然后添加/删除 <span> 上的类仅 .
这是一个 jsFiddle:https://jsfiddle.net/07fpueyb/
或者，由于您已经在使用 jQuery，您可以使用 fadeTo() 函数大大简化此类情况:https://api.jquery.com/fadeTo/
在 https://jsfiddle.net/cyr9575e/ 查看 jsFiddle
编辑:您可以通过在 CSS 中使用 :hover 伪类再次更轻松地完成此操作:https://jsfiddle.net/8z7581jb/1/
关于javascript - 为什么此文本不更改为完全不透明？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43508051/
25
4
0
1。 Set 的 parallelStream 没有使用足够的线程。 Java8 parallelStream 不能完全并行工作。在我的计算机中，当任务数小于处理器数时，java8 集的 parall
我想将位置发送到 Google Geocoding API，因此我想用 + 替换文本中的任何空格或逗号(因为可以接收)。 例如，所有这些样本应返回 Glentworth+Ireland: Glentw
所以我需要为将要上传的图像文件生成较小的预览，并且我必须在每个文件名的末尾附加“_preview”。 目前我正在这样做: uploadFile.map((file) => { if (fi
我们可以用参数定义类型同义词，这在与实际类型一起使用时效果很好: type MyType t = t String String data Test a b = Test a b f :: MyTyp
给定一个包含一些 TGraphic 后代的 Delphi TPicture，我需要计算像素颜色和不透明度。我认为我必须为每个类提供不同的实现，并且我认为我已经涵盖了 TPngImage。 32 位位图
我正在调试 Powershell 项目。我正在使用 Import-Module 从我的 C# dll 加载 PS 模块，一切正常。尽管调用 Remove-Module 并不会完全卸载模块，因为 DLL
有没有办法在ElasticSearch中要求完整(尽管不一定精确)匹配？ 例如，如果一个字段具有术语"I am a little teapot short and stout"，我想匹配" i am
我正在尝试根据日期范围连接两个表。 表A格式为: ID CAT DATE_START DATE_END 1 10 2018-01-01 2020-12-31 2
我最近加入了一家公司，在分析他们的环境时，我注意到 SharePoint web.config 的信任级别设置为“完全”。我知道这绝对是一个糟糕的做法，并且希望 stackoverflow 社区能够帮
我构建了一个完全依赖 AJAX 的 php/js 应用程序，因此没有任何内容是静态的。 我正在尝试找到一种方法来转换基于内容的广告，该广告使用 AJAX 交付的内容作为关键字。 Google 的 Ad
我正在尝试根据日期范围连接两个表。 表A格式为: ID CAT DATE_START DATE_END 1 10 2018-01-01 2020-12-31 2
我熟悉 FileSystemWatcher 类，并使用它进行了测试，或者我使用快速循环进行了测试，并在目录中列出了类型文件的目录列表。在这种特殊情况下，它们是 zip 压缩的 SDF 文件，我需要解压
按照 Disqus 上的教程进行操作时，评论框不会呈现。从 disqus 上找到的管理员看来，它的设置似乎是正确的。 var disqus_config = function () { this
是否可以使用 Cython 将 Python 3 应用程序完全编译/链接为可执行格式(当然假设所有使用的模块都是 cythonable)。 我在 Linux 下工作，我希望获得一个依赖性尽可能小的 E
我有一个 C# 控制台应用程序，而不是运行预构建步骤(以获取 NuGet 包)。 当我调试这个时，我想传入一个参数并显示控制台。当我不调试它时，我不想看到它。我什至不希望它在那里闪烁一秒钟。 我找到了
我在 n 个节点上有一个完整的 19 元树。我标记所有具有以下属性的节点，即它们的所有非根祖先都是最年长或最小的 child (包括根)。我必须为标记节点的数量给出一个渐近界限。 我注意到 第一层有一
我正在阅读一篇关于 Java Volatile 关键字的文章，遇到了一些问题。 click here public class MyClass { private int years;
一本书中写道——“如果问题 A 是 NP-Complete，则存在解决 A 的非确定性多项式时间算法”。但据我所知，"is"——NP 完全问题的答案可以在多项式时间内“验证”。我真的很困惑。能否使用非
考虑以下问题: 有N个硬币，编号为1到N。 你看不到它们，但是给出了关于它们的 M 个事实，形式如下: struct Fact { set positions int num_head
我想制作一个包装数字类型的类型(并提供额外的功能)。 此外，我需要数字和包装器可以隐式转换彼此。 到目前为止我有: template struct Wrapper { T value;
我是一名优秀的程序员,十分优秀！