使用CSS，JavaScript或jQuery在悬停时更改单词？

Question

I am currently working on a project where I would like a within a paragraph to change to a when you hover on the .

The purpose of creating a word change (when hovering over that word) would be for a web visitor to see the original [spelling of a] word from an old document when they hovered over a word, versus just reading the edited version.

I've played around a little with this in simple CSS (CodePen example here: https://codepen.io/LeahS/pen/LmvKZa ), but would like to know the best way to create a word change as mentioned above. Is there a way with just CSS? Or is it better with jQuery or Javascript? I currently only know rough JavaScript and jQuery, but will learn both if it helps.

Appreciate your answers and insights, and thank you for taking time to comment.

Notes:

1: There would be multiple words that must be changed per paragraph, and multiple (more than 100+) paragraphs. If at all possible, I would NOT like to create unique CSS classes for each word...

2: I am/would like to use WordPress.

3: I am a beginner.

CodePen code:

<style>
.quote:hover .update, .quote .orig {
  display: none;
}
.quote:hover .orig {
  display: inline-block;
}
.quote .update {
  color: blue;
  font-weight: bold;
}
.quote .orig {
  font-style: italic;
}

</style>

<div>We went
<span class="quote">
<spell class="update">about</spell>
<spell class="orig">abut</spell>
</span>
our
<span class="quote">
<spell class="update">business</spell>
<spell class="orig">busness</spell>
</span>
.
</div>

Answer 1

You could wrap both elements in a span, and drive the hover off of that element, so that the hiding of the children does not affect the hover state.

 .swappable .orig { display: none; } .swappable:hover .orig { display: inline-block; } .swappable:hover .update { display: none; } .swappable { color: blue; } 

 <div class="quote"> <div>We went <span class="swappable"> <spell class="update">about</spell> <spell class="orig">abut</spell> </span> our <span class="swappable"> <spell class="update">business</spell> <spell class="orig">busness</spell> </span> . </div> 

Answer 2

I made a couple of changes to the html to make it work, and had both versions of the spelling be within the same span called "change". It's far from perfect but I suppose it's a start?

 .changed:hover .update { display: none; } .changed:hover .orig { display: inline-block; } .quote .update { color: blue; font-weight: bold; } .quote .orig { font-style: italic; display:none; } .changed { cursor:pointer } 

 <div class="quote"> <div>We went <span class="changed"><spell class="update">about</spell><spell class="orig">abut</spell></span> our <span class="changed"><spell class="update">business</spell><spell class="orig">busness</spell></span> . </div> 

Answer 3

Showing the other word with plain, vanilla CSS, based on your provided HTML code is as simple as:

spell.update:hover + spell.orig, spell.orig:hover {
 display:inline-block;
}

If you want to hide the updated spelling when they're looking at the original, you might find it helpful to enclose both in a span, so you can do the following:

span.spelling-container:hover>.orig {
 display:inline-block;
}
span.spelling-container:hover>.update {
 display:none;
}

Answer 4

You can use data attributes and CSS to display the two different words.

 span[data-spell] { display: inline-block; border-bottom: 1px dotted gray; cursor: help; } span[data-spell]::before, span[data-spell]::after { display: none; } span[data-spell]::before { content: attr(data-spell); } span[data-spell]::after { content: attr(data-original); } span[data-original]:not(:hover)::before, span[data-spell]:hover::after { display: block; } 

 <div class="quote"> We went <span data-spell="about" data-original="abut"></span> our <span data-spell="business" data-original="busness"></span>. </div>