好的，所以我有javascript和CSS让单词出现然后根据鼠标是否悬停在它们上而永久消失。有些单词（exceptions）在整个时间内仍然可见。我试图做到这一点，所以有些词首先是看不见的，但只有在被徘徊之后才出现。有什么想法吗？我添加了一个moreExceptions变量，我希望以这种方式操作。除此之外，我很难过。对不起，我真的不是编码员。
JS：
$(document).ready(function() {
var exceptions = ["Bulls", "rhymes,", "spin", "blinding", "pinched", "oxygen", "tendrils", "exact", "agreement", "combination", "swallow", "smiles",
"mirror", "treehouse", "project", "dwindling", "laughing", "fall", "stupor", "breaking", "skin", "untimely"];
var moreExceptions = ["you", "that"];
$("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
});
});
CSS：
* {
background-color: black
}
h1 {
color: white;
text-align: center;
opacity: 0.5;
}
img {
width: 10%;
height: 10%
opacity: 0.5;
}
.hover {
opacity: 0;
}
.hovering {
opacity: 1;
}
span {
transition: opacity 0.5s;
opacity: 0;
}
p {
cursor: default;
line-height: 200%;
border-bottom: solid;
border-color: rgb(50, 50, 50);
color: white;
font-size: 50px;
}
.instructions {
color: white;
}
@-webkit-keyframes p {
0% { border-color: rgb(50, 50, 50); }
100% { border-color: rgb(20, 20, 20); }
}
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>
<div class= "instructions">
Place your cursor directly below the arrow, and follow the lines right-to-left. Fullscreen your browser for best effect.
</div>
</head>
<body>
<img src="arrow.png">
<br>
<div class = story>
<p>
"Do you see it?" The Grandmaster calls out, "The Second </p> <p> Star?" James did not see the Second Star, not even through the </p> <p> telescope,
but then again he was never very good at spotting </p> <p> constellations. He remembers how his neighbor used to point </p> <p> them out to him
during neighborhood barbeques. Bulls and </p> <p> lions so stolidly sitting in the sky. Those beasts you often hear </p> <p> about in the Bible.
When you actually saw them-at the zoo </p> <p> or something-they looked quite pitiable and stupid. This is not </p> <p> like that; this is science.
No mythologies, characters or </p> <p> rhymes; only astronomy and physics.
"We see it!" Calls out </p> <p> a young woman, about his own age. Her voice is smooth and </p> <p> bursting with piety. She and some other folks are
dancing </p> <p> around, giddy at the coming transformation. She's not </p> <p> extraordinarily pretty-none of them are really-but the glow of </p> <p> their
joy, the pure bliss that shines off of them in every </p> <p> direction makes fine nymphs out of them. The childish spirits </p> <p> spin around and
giggle, jumping like stray flames from the </p> <p> bonfire that had burned earlier. He admires them deeply. </p> <p> He is a very large man, and
although he has been working</p> <p> toward letting his spirit fly free, he is not yet able to dance </p> <p> with such blaze.
"Come here children! Settle down!" The </p> <p> Grandmaster shouts, wiping his brow. "Do you know why we </p> <p> live out here?" he pauses, seemingly
inhabited by some </p> <p> wayward astral-flower, and sniffs. "Well, alright I'll tell you. </p> <p> You see, the city is blinding; wayward light leaks
from every </p> <p> window." His voice softens, and he looks at us as a father </p> <p> would, "And so here we are, come to a place of peace; where </p> <p> the
infinite pinched points of the universe, stream along in a </p> <p> dance of profound revelry. Where power doesn't exist except </p> <p> for the collective
power. Come to me. Let's hold each other </p> <p> now."
Two women rush to either side of the Grandmaster </p> <p> eagerly, as if trying to catch a butterfly. The whole group grabs </p> <p> ahold of each other,
however they can. Even though there are </p> <p> at least eleven people between him and the Grandmaster, </p> <p> James can still feel the tendrils of energy
reach him through </p> <p> the others. It feels warm and exact. His body reverberates with </p> <p> the excitation. He feels himself drawing closer to the </p> <p>
frequency of their leader-the Natural Frequency.
"The light is </p> <p> coming to carry us children! We shall soon ascend and </p> <p> transcend. As both particle and wave we will rise from this </p> <p> earth.
As the ultimate purveyor of knowledge-we shall </p> <p> become light itself, if only we prepare our bodies to reach the </p> <p> Natural Frequency." His face
and voice darken at once, "While </p> <p> the unattuned become the less than dark, the nothing they have </p> <p> always secretly known themselves to be."
Moans of agreement </p> <p> and ecstasy echo between the Children and the Grandmaster.</p> <p> The energy compounds between them. The Resonance is </p> <p> beginning.
The Second Star and the First Star have grown </p> <p> closer. They are almost exactly seven light-years apart now. </p> <p> The Grandmaster tells them that this
is the perfect distance </p> <p> away. Tonight the combination of their light will produce the </p> <p> Perfect Wave, a wave of light that contains frequencies
in </p> <p> perfect alignment with the frequency of both an electron and</p> <p> a proton-the Natural Frequency. The rest of the world will </p> <p> fade, but the
Children will join the light due to their perfect </p> <p> attunement.
"The world is so dark," the Grandmaster begins </p> <p> again, sobbing, "It's so dark. It's just not fair." The rest of the </p> <p> group begins to cry as
well. Their passionate moans have </p> <p> turned to despairing wails. James too sheds a few tears. He </p> <p> couldn't convince them. They wouldn't come with
him. "We </p> <p> tried to free them Children. We really did try our best. But it's </p> <p> time to go. Let's swallow them down and begin the </p> <p> Attunement."
James looks at the Attunement Agent in his </p> <p> hand, designed by the Grandmaster himself to allow the </p> <p> frequencies of his body to merge with the
Natural Frequency. </p> <p> He puts the pill in his mouth, and takes a swig from the </p> <p> water bottle that someone has evidently handed him. As he </p> <p> throws
his head back to swallow the pill, he sees the stars, </p> <p> mutely dinging in the sky. He feels very, very good now.</p>
<p>**************************************************************************************************************************************************************</p>
<p> James wakes up. There is still a world. He is not light, but he </p> <p> is still something. He misses the feeling he felt before. Again </p> <p> hungry for
the flesh of imagined sweetings, he rises to his feet. </p> <p> They feel very heavy. He takes off his shoes and ties the </p> <p> shoelaces together and they dangle
from his fingertips, like </p> <p> dice on a rear view mirror, as he wanders through a forest </p> <p> unknown to him. He moves towards what little bonfire smoke </p> <p> remained
from the campsite. The sun is up, but just barely. As </p> <p> he walks he sees the other children, some of them huddled </p> <p> together, still sleeping, with smiles on
their faces. Others look </p> <p> a lot like him, wandering around aimlessly. He is too afraid to </p> <p> speak to them. The energy is gone. They are all still here.
We </p> <p> are all still here. Very still.
Where is the grandmaster? Has he </p> <p> ascended? If he had ascended, why are the children still here? </p> <p> Why is everything still here? He comes out of the
woods, into </p> <p> the clearing where they have built their houses. There is no </p> <p> music playing, as there so often was. It is beginning to rain. </p> <p> Good for the
crops. He eyes the grandmaster's treehouse. He has </p> <p> never been there. Grandmaster always told them that they </p> <p> should not visit his lodging unless it was
an absolute </p> <p> emergency. And even then, if Daydream was available, they </p> <p> were supposed to tell her and she was to summon him. But if </p><p> there ever was an
emergency, this was it. Striding towards the </p> <p> abode of the mistaken soothsayer, he tries to project confidence </p> <p> as best as he can, but he is sure it is
not working.
He arrives at </p> <p> the bottom of the rope ladder, and calls up to the grandmaster. </p> <p> "Grandmaster!" He is surprised to hear his own voice; he had </p> <p>not heard
it by itself for so long. It does not sound the way that </p> <p> he remembered it. But there is no response. He yells louder, but </p> <p> still no reply. He looks around
warily, seeing only wayward </p> <p> children still dwindling around the edge of the woods, unsure of </p> <p> how to continue. He drops his shoes and takes a step onto the </p> <p>
ladder. He struggles even to balance on the first rung, but </p> <p> pushes up. Swinging back and forth, he forces himself to reach </p> <p> the top. He places his elbows
on the floorboards, and peers </p> <p> through the open door. There the grandmaster sits. His throat </p> <p> laughing blood, Daydream sleeping forever in his arms.
James </p> <p> falls. It's about a six foot drop. Nothing terrible, but air seems </p> <p> to flit away from him with each breath now. He lays on his </p> <p> back. The oxygen
is coming back to him, a tempestuous sylph </p> <p> seeming sometimes to tempt him with an especially full breath</p> <p> before teasing away again. But as he lays, it
comes back to him. </p> <p> It gets easier and by the end he breathes easily, his own form of </p> <p> meditation. Some time passes, he is not sure how much, before </p> <p> he
rises to his feet. He is not sure whether he is in shock, but the </p> <p> pain of the fall seems to have displaced the horror of what he </p> <p> had seen.
He goes back to his quarters, an old school bus that he </p> <p> shares with about eight other men as living quarters. The </p> <p> steering wheel was still attached,
but the bus did not drive. Idly, </p> <p> he sits and gives the steering wheel a turn or two. One man lays </p> <p> on his mat, blissful and unconscious, like a stuffed
animal. He </p> <p> must have made his way back in the technicolor stupor. Habit is </p> <p> a powerful hand to hold. Again, James is too afraid to wake </p> <p> him, too afraid
to speak to him. He does not know these people. </p> <p> He only knows the grandmaster, and he has gone.
James sits </p> <p> incredulous in the seat of the bus. A riddling strand of accordion </p> <p> rain weeps across the window, leaving behind it a trail of </p> <p>
self-fragments before breaking up into nothing. The silence </p> <p> which at first oppressed him, seemed to conjure up a kind of </p> <p> peace within him now.
There was no silence before. No matter </p> <p> how early you woke up. Always people singing, yelling, </p> <p> chanting their mantras, or perhaps the grandmaster
would be </p> <p> giving a sermon. He had a booming voice, one that really got </p> <p> under your skin and frisked your spirit. But now, the noise </p> <p> subsided, James
can think again.
He thinks first about how he </p> <p> has no wallet, no ID, no social security number, no cellphone </p> <p> and how there’s no landline. He then thinks about how
he's not </p> <p> sure how to get home, or if there still is a home. He hasn't talked </p> <p> to his mother or father in years. They probably would not have </p> <p> missed
him anyway. What is there for him, out there? But then, </p> <p> what is here? He peers out the window. It seems that the </p> <p> children have discovered the untimely
death of the grandmaster. </p> <p> They are tearing anything and everything apart. They are </p> <p> pulling the crops up, biting them and then spitting them onto </p> <p> the
ground. The shepherd has gone, and the sheep have grown </p> <p> rabid in his absence.
James isn't quite sure what to do. So he </p> <p> just holds the steering wheel of the old school bus, and turns it. </p> <p> Round and round, round and round.</p>
</div>
</body>
</html>
这里是jsfiddle：
https://jsfiddle.net/nLz5h2ub/#&togetherjs=jaOGLpUNab
谢谢！
答案 0 :(得分：1)
UPD 我喜欢solution的Joe Higley和{{3}}
看看这个。
我添加了css类.alwaysVisible，它与.hovering
然后在JS中使用#[removeClass][1] onmouseout
P.S。我也做了你的例外词#toLowerCase（因为那里的一些词是大写的）..
$(document).ready(function() {
var exceptions = ["bulls", "rhymes,", "spin", "blinding", "pinched", "oxygen", "tendrils", "exact", "agreement", "combination", "swallow", "smiles",
"mirror", "treehouse", "project", "dwindling", "laughing", "fall", "stupor", "breaking", "skin", "untimely"];
var moreExceptions = ["you", "that"];
$("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) {
var $word = $("<span>").text(x); //create '<span>'+x+'</span>' as jQuery object
if(exceptions.includes(x.toLowerCase())){
return $word.addClass("alwaysVisible").prop("outerHTML"); //return object as a string
}
if(moreExceptions.includes(x.toLowerCase())){
$word.addClass("hiddenAtFirst"); //special class for words from moreException
}
return $word.addClass("hover").prop("outerHTML");
}).join(" ");
$(this).html(txt); //set the text to our newly manipulated text
}).on("mouseout", ".hover", function() {
$(this).removeClass("hover"); // without .hover it will not reappear again
//if it's from moreException list
if($(this).hasClass("hiddenAtFirst")){
$(this).addClass("alwaysVisible"); //make it alwaysVisible
}
});
});* {
background-color: black
}
h1 {
color: white;
text-align: center;
opacity: 0.5;
}
img {
width: 10%;
height: 10%
opacity: 0.5;
}
.hover {
opacity: 0;
}
/* VISIBLE */
.alwaysVisible, .hover:hover {
opacity: 1;
}
span {
transition: opacity 0.5s;
opacity: 0;
}
p {
cursor: default;
line-height: 200%;
border-bottom: solid;
border-color: rgb(50, 50, 50);
color: white;
font-size: 50px;
}
.instructions {
color: white;
}
@-webkit-keyframes p {
0% { border-color: rgb(50, 50, 50); }
100% { border-color: rgb(20, 20, 20); }
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class = story>
<p>
"Do you see it?" The Grandmaster calls out, "The Second </p> <p> Star?" James did not see the Second Star, not even through the </p> <p> telescope,
but then again he was never very good at spotting </p> <p> constellations. He remembers how his neighbor used to point </p> <p> them out to him
during neighborhood barbeques. Bulls and </p> <p> lions so stolidly sitting in the sky. Those beasts you often hear </p> <p> about in the Bible.
When you actually saw them-at the zoo </p> <p> or something-they looked quite pitiable and stupid. This is not </p> <p> like that; this is science.
No mythologies, characters or </p> <p> rhymes; only astronomy and physics.
"We see it!" Calls out </p> <p> a young woman, about his own age. Her voice is smooth and </p> <p> bursting with piety. She and some other folks are
dancing </p> <p> around, giddy at the coming transformation. She's not </p> <p> extraordinarily pretty-none of them are really-but the glow of </p> <p> their
joy, the pure bliss that shines off of them in every </p> <p> direction makes fine nymphs out of them. The childish spirits </p> <p> spin around and
giggle, jumping like stray flames from the </p> <p> bonfire that had burned earlier. He admires them deeply. </p> <p> He is a very large man, and
although he has been working</p> <p> toward letting his spirit fly free, he is not yet able to dance </p> <p> with such blaze.
"Come here children! Settle down!" The </p> <p> Grandmaster shouts, wiping his brow. "Do you know why we </p> <p> live out here?" he pauses, seemingly
inhabited by some </p> <p> wayward astral-flower, and sniffs. "Well, alright I'll tell you. </p> <p> You see, the city is blinding; wayward light leaks
from every </p> <p> window." His voice softens, and he looks at us as a father </p> <p> would, "And so here we are, come to a place of peace; where </p> <p> the
infinite pinched points of the universe, stream along in a </p> <p> dance of profound revelry. Where power doesn't exist except </p> <p> for the collective
power. Come to me. Let's hold each other </p> <p> now."
Two women rush to either side of the Grandmaster </p> <p> eagerly, as if trying to catch a butterfly. The whole group grabs </p> <p> ahold of each other,
however they can. Even though there are </p> <p> at least eleven people between him and the Grandmaster, </p> <p> James can still feel the tendrils of energy
reach him through </p> <p> the others. It feels warm and exact. His body reverberates with </p> <p> the excitation. He feels himself drawing closer to the </p> <p>
frequency of their leader-the Natural Frequency.
"The light is </p> <p> coming to carry us children! We shall soon ascend and </p> <p> transcend. As both particle and wave we will rise from this </p> <p> earth.
As the ultimate purveyor of knowledge-we shall </p> <p> become light itself, if only we prepare our bodies to reach the </p> <p> Natural Frequency." His face
and voice darken at once, "While </p> <p> the unattuned become the less than dark, the nothing they have </p> <p> always secretly known themselves to be."
Moans of agreement </p> <p> and ecstasy echo between the Children and the Grandmaster.</p> <p> The energy compounds between them. The Resonance is </p> <p> beginning.
The Second Star and the First Star have grown </p> <p> closer. They are almost exactly seven light-years apart now. </p> <p> The Grandmaster tells them that this
is the perfect distance </p> <p> away. Tonight the combination of their light will produce the </p> <p> Perfect Wave, a wave of light that contains frequencies
in </p> <p> perfect alignment with the frequency of both an electron and</p> <p> a proton-the Natural Frequency. The rest of the world will </p> <p> fade, but the
Children will join the light due to their perfect </p> <p> attunement.
"The world is so dark," the Grandmaster begins </p> <p> again, sobbing, "It's so dark. It's just not fair." The rest of the </p> <p> group begins to cry as
well. Their passionate moans have </p> <p> turned to despairing wails. James too sheds a few tears. He </p> <p> couldn't convince them. They wouldn't come with
him. "We </p> <p> tried to free them Children. We really did try our best. But it's </p> <p> time to go. Let's swallow them down and begin the </p> <p> Attunement."
James looks at the Attunement Agent in his </p> <p> hand, designed by the Grandmaster himself to allow the </p> <p> frequencies of his body to merge with the
Natural Frequency. </p> <p> He puts the pill in his mouth, and takes a swig from the </p> <p> water bottle that someone has evidently handed him. As he </p> <p> throws
his head back to swallow the pill, he sees the stars, </p> <p> mutely dinging in the sky. He feels very, very good now.</p>
<p>**************************************************************************************************************************************************************</p>
<p> James wakes up. There is still a world. He is not light, but he </p> <p> is still something. He misses the feeling he felt before. Again </p> <p> hungry for
the flesh of imagined sweetings, he rises to his feet. </p> <p> They feel very heavy. He takes off his shoes and ties the </p> <p> shoelaces together and they dangle
from his fingertips, like </p> <p> dice on a rear view mirror, as he wanders through a forest </p> <p> unknown to him. He moves towards what little bonfire smoke </p> <p> remained
from the campsite. The sun is up, but just barely. As </p> <p> he walks he sees the other children, some of them huddled </p> <p> together, still sleeping, with smiles on
their faces. Others look </p> <p> a lot like him, wandering around aimlessly. He is too afraid to </p> <p> speak to them. The energy is gone. They are all still here.
We </p> <p> are all still here. Very still.
Where is the grandmaster? Has he </p> <p> ascended? If he had ascended, why are the children still here? </p> <p> Why is everything still here? He comes out of the
woods, into </p> <p> the clearing where they have built their houses. There is no </p> <p> music playing, as there so often was. It is beginning to rain. </p> <p> Good for the
crops. He eyes the grandmaster's treehouse. He has </p> <p> never been there. Grandmaster always told them that they </p> <p> should not visit his lodging unless it was
an absolute </p> <p> emergency. And even then, if Daydream was available, they </p> <p> were supposed to tell her and she was to summon him. But if </p><p> there ever was an
emergency, this was it. Striding towards the </p> <p> abode of the mistaken soothsayer, he tries to project confidence </p> <p> as best as he can, but he is sure it is
not working.
He arrives at </p> <p> the bottom of the rope ladder, and calls up to the grandmaster. </p> <p> "Grandmaster!" He is surprised to hear his own voice; he had </p> <p>not heard
it by itself for so long. It does not sound the way that </p> <p> he remembered it. But there is no response. He yells louder, but </p> <p> still no reply. He looks around
warily, seeing only wayward </p> <p> children still dwindling around the edge of the woods, unsure of </p> <p> how to continue. He drops his shoes and takes a step onto the </p> <p>
ladder. He struggles even to balance on the first rung, but </p> <p> pushes up. Swinging back and forth, he forces himself to reach </p> <p> the top. He places his elbows
on the floorboards, and peers </p> <p> through the open door. There the grandmaster sits. His throat </p> <p> laughing blood, Daydream sleeping forever in his arms.
James </p> <p> falls. It's about a six foot drop. Nothing terrible, but air seems </p> <p> to flit away from him with each breath now. He lays on his </p> <p> back. The oxygen
is coming back to him, a tempestuous sylph </p> <p> seeming sometimes to tempt him with an especially full breath</p> <p> before teasing away again. But as he lays, it
comes back to him. </p> <p> It gets easier and by the end he breathes easily, his own form of </p> <p> meditation. Some time passes, he is not sure how much, before </p> <p> he
rises to his feet. He is not sure whether he is in shock, but the </p> <p> pain of the fall seems to have displaced the horror of what he </p> <p> had seen.
He goes back to his quarters, an old school bus that he </p> <p> shares with about eight other men as living quarters. The </p> <p> steering wheel was still attached,
but the bus did not drive. Idly, </p> <p> he sits and gives the steering wheel a turn or two. One man lays </p> <p> on his mat, blissful and unconscious, like a stuffed
animal. He </p> <p> must have made his way back in the technicolor stupor. Habit is </p> <p> a powerful hand to hold. Again, James is too afraid to wake </p> <p> him, too afraid
to speak to him. He does not know these people. </p> <p> He only knows the grandmaster, and he has gone.
James sits </p> <p> incredulous in the seat of the bus. A riddling strand of accordion </p> <p> rain weeps across the window, leaving behind it a trail of </p> <p>
self-fragments before breaking up into nothing. The silence </p> <p> which at first oppressed him, seemed to conjure up a kind of </p> <p> peace within him now.
There was no silence before. No matter </p> <p> how early you woke up. Always people singing, yelling, </p> <p> chanting their mantras, or perhaps the grandmaster
would be </p> <p> giving a sermon. He had a booming voice, one that really got </p> <p> under your skin and frisked your spirit. But now, the noise </p> <p> subsided, James
can think again.
He thinks first about how he </p> <p> has no wallet, no ID, no social security number, no cellphone </p> <p> and how there’s no landline. He then thinks about how
he's not </p> <p> sure how to get home, or if there still is a home. He hasn't talked </p> <p> to his mother or father in years. They probably would not have </p> <p> missed
him anyway. What is there for him, out there? But then, </p> <p> what is here? He peers out the window. It seems that the </p> <p> children have discovered the untimely
death of the grandmaster. </p> <p> They are tearing anything and everything apart. They are </p> <p> pulling the crops up, biting them and then spitting them onto </p> <p> the
ground. The shepherd has gone, and the sheep have grown </p> <p> rabid in his absence.
James isn't quite sure what to do. So he </p> <p> just holds the steering wheel of the old school bus, and turns it. </p> <p> Round and round, round and round.</p>
</div>
答案 1 :(得分：1)
好的，看起来你已经有了基本的想法。
这里的步骤3应该类似于：
$('p').not('.hovering').mouseenter(function() {
$(this).AddClass('hovering');
});
$('.hovering').mouseleave(function() {
$(this).RemoveClass('hovering');
});
或者你可以在CSS中完成所有这些并摆脱js和额外的“徘徊”＆＃39;您可以使用以下代码参加课程：
.hover {
opacity: 0;
}
.hover:hover {
opacity: 1;
}
这实现了与以前相同的效果，没有复杂性。此外，如果你想在悬停时使单词淡入和淡出，你只需要为这个CSS代码添加一些CSS过渡。
希望这有帮助。