个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试创建一个网页，您将鼠标悬停在其上的单词会消失，并且在您离开后再也不会出现，除了几个单词之外。我从另一个 StackOverflow 人员那里获得了大部分代码，但我在让 Javascript 与 HTML 一起实际工作时遇到了困难。
JS 中的警报只是为了检查 javascript 是否正常工作。也许我错误地将它包装在 document.ready 中？
如果我是个十足的傻瓜，我很抱歉。我不是编码员，我只是想为英语课做一个“电子文本”项目。任何帮助，将不胜感激。谢谢。这是我的代码:
HTML:
<!DOCTYPE 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>
CSS:
* {
}
.hover {
opacity: 0.01;
}
.hovering {
opacity: 1;
}
span {
transition: opacity 0.5s;
opacity: 0;
}
p {
cursor: default;
}
Javascript:
$document.ready(function() {
alert("Help!");
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
});
});
最佳答案
你的实际代码有几个问题:
首先它是 $(document) 而不是 $document。
然后，在您的代码中，您尝试在新行中链接一些方法，例如，当您编写 .split(""); 时，只能在对象或数组上调用方法在 javascript 中，因此您需要像这样更改代码:
$("p").each(function() {
var txt = $(this).text()
.split(" ")
.map(function(x) {
return exceptions.includes(x.toLowerCase()) ? x : "<span class='hover'>" + x + "</span>"
}).join(" ");
$(this).html(txt);
});
注意:
.join() 或任何其他方法(除了在 window 范围内声明的函数)在使用分号 ; 之后在上一行中，因为 ; 表示语句结束，所以在下一行中，您需要调用 object 或数组。一些有用的链接:
我建议你可以阅读MDN - Introducing JavaScript objects和 The Javascript Guide to Objects, Functions, Scope, Prototypes and Closures进一步阅读有关此主题的教程。
关于Javascript 和 HTML 似乎无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43507099/
25
4
0
自从我 faced an issue由于背景图片对于不同分辨率的内容来说太短，我尝试将背景分成 3 部分并自动拉伸(stretch)中间部分以相应地填充顶部和底部图像之间的空间。不幸的是我没能在 CS
我从去年开始就在我的程序中运行这个函数(Linux 和 Windows)。 现在我需要实现一个新功能，我的新构建不再运行。 我还有其他使用 POST 的 CUrl 函数，结果是一样的:没问题，但我的
在评估函数应用方面，Haskell 是只支持普通降阶还是也支持应用降阶？我是否认为正常顺序是 Haskell 惰性的原因？ 最佳答案 GHC 运行时不使用术语缩减策略，因为那会非常低效。事实上，GHC
怎么来的multi使用多处理池对多个“进程”上的数据进行分段和处理的函数比仅调用 map 慢(8 秒)。功能(6 秒)？ from multiprocessing import Pool import
假设我正在渲染一个 3d GL_TRIANGLE。该对象需要 3 个顶点才能定义:A、B、C。我将此类数据放入缓冲区并通过 glVertexAttribPointer 将其绑定(bind)到着色器。
我有一个字体的三个文件，普通的，粗体的和浅色的。由于 font-weight:light 不存在，我该如何在 font-face 上设置 light 呢？ 顺便问一下，font-weight:ligh
我是 C 的新手，我似乎无法弄清楚什么似乎是一个非常简单的指针问题。我的程序将行号添加到文件中。它逐行读入文件，然后在每行的开头添加一个行号。它在每个文件上都可以正常工作，如下所示: soccer@s
我有以下代码，我不确定为什么当它命中 Myclass 的析构函数时我会收到堆损坏检测错误。我相信我正在正确地释放内存？？ #include #include using namespace std
有什么方法可以将“正常”数学符号解释为逆波兰符号 (RPN)..？ 例如1) 2 + 3*4 - 1 = 234*+1-2) 5 (4-8) = 548- 你可以假设遵循 BODMAS 规则并且必须首
http://www.ergotopia.de/ergonomie-shop/ergonomische-kissen/orthopaedisches-sitzkissen的手机页面应该看起来像右边(检
我正在 Phonegap/Cordova 中构建一个应用程序。应用目前相当简单，但确实需要网络状态和地理定位插件才能工作。 到目前为止，我已经在 Android 上开发了该应用程序(目前它仅由一些基本
我一整天都在做这个，但没有运气 我设法在一行 TfidfVectorizer 中消除了问题 这是我的工作代码 from sklearn.feature_extraction.text import C
也许有人看到一个错误，问题是当我按btn2 (button 2)和btn3 (button 3)应用程序crashes时，但操作仍然有效，即video正在运行并且PDF打开，而button 1正常工作
我正在开发一个应用程序。它的第一页是登录屏幕。成功登录后，我想将用户带到选项卡式 Activity 。我怎样才能在安卓中做到这一点？谢谢 最佳答案 在 Android 中，启动 Activity 是通
我不确定我在这里做错了什么。 :normal! I### 当我对一个单词执行此命令时，我想要的最终结果是: ### word 但是我得到了这个: ###word 最佳答案 Vim 的 :normal是
我必须将 2 个静态矩阵发送到分配动态矩阵的函数，将矩阵 1 乘以矩阵 2，并返回新矩阵的地址。请注意，COMM 很常见。 我尝试删除 free_matrix 行，它工作正常。 void main()
我在我的一个项目中使用 Gnome libglib 并遇到了一个奇怪的错误。我可以输入 GList 的元素数量看起来仅限于 45 个。在第 45 个元素处，它给出了此错误 40 counter 41
我正在尝试获取“顶级”HWND 的尺寸。即，我想要 Firefox/Windows 资源管理器等的主 HWND 的当前尺寸。窗口。如果窗口最小化， GetWindowRect() 将不起作用。 Get
相同的标题:什么是索引 - 正常 - 全文 - 唯一？ 最佳答案 普通索引用于通过仅包含行数据的切片或散列来加速操作。 全文索引向数据库的全文搜索 (FTS) 引擎指示它应该将数据存档在给定字段中，以
我正在使用 EnumParser来自 here它在 VC++ 中编译得很好，但是使用 gcc 我有这样的错误: ./Terminator.o: In function `EnumParser::Enu
我是一名优秀的程序员,十分优秀！