好的，所以我不是编码员，我相信每个人都讨厌在这里看到。我只需要写一个＆＃34;电子文本＆＃34;我正在上英语课。我非常精通HTML / CSS，但与Javascript / JQuery相比并不多。我试图制作HTML元素＆＃34; p＆＃34;如果鼠标悬停在它上面，则淡入淡出，如果鼠标没有悬停在它上面，则淡出，但它似乎无法正常工作。
最终，我希望每个单词在悬停时出现，然后永久消失（即使再次徘徊），除了几个单词。如果有人想就此提出建议，那就太棒了。有没有办法做到这一点，而不是让每个单词成为自己的元素？我会像这样写一个完整的故事，所以这样会非常令人沮丧。也许某种for循环？不管怎样，谢谢。我目前的代码如下：
HTML：
$(document).ready(
function() {
$("p").hover(
function(e) {
e.preventDefault();
$("p").stop().fadeIn();
},
function(e) {
e.preventDefault();
$("p").stop.fadeOut();
}
);
});* {}
.title {
text-align: center;
font-size: 45px;
}
.story {
float: left;
word-break: break-all;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="story">
<p>
Everyone was a dead bug. It's not under there. Please don't look.
</p>
</div>
答案 0 :(得分：1)
也许这样的事情可以解决问题。为了便于阅读和解释，我已经将其分解了一下，但我还将包含一个更简洁的代码段。
简明（仅限JS）：
var exceptions = ["lorem", "ipsum", "consectetur", "pharetra"];
$("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);
}).on("mouseover", ".hover", function() {
$(this).addClass("hovering");
}).on("mouseout", ".hovering", function() {
$(this).attr("class", "");
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
展开：
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: 0.2;
}
.hovering {
opacity: 1;
}
span {
transition: opacity 0.5s;
opacity: 0;
}
p {
cursor: default;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
hover around in the area below...
<br>
<br>
<p>
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>
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>
我使用.split(" ")将单词拆分为单词，然后使用<span class="hover"></span>将.map()应用于不在异常列表中的任何内容。然后，我们使用.join(" ")将空格与空格一起放回。
使用CSS和一些基本的jQuery事件，我在任何悬停元素上添加不透明度，然后在鼠标离开时删除所有类 - 这将其不透明度设置为0，并将其限制为“重新激活”。