Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
vauclusebitter

Change text block content on hover (not image).

Question

I'm trying to make the content of a text box change when hovered above and then revert back to the original text when mouse is moved away again.

E.g. I would like the text box to change from:

example.before
to
example.after (on hover)
to
example.before

Essentially only half the text will change, the word 'example' would always stay as is.
There seem to be a few tutorials on how to do this with an image block or text appearing over an image with basic CSS but not with text on text. I could do a workaround with images of the text but would prefer not keep clean, aligned and easily editable. I've found CSS to make the new text appear over the original on hover but can't seem to simultaneously hide the original so it's just doubled up. 

If anyone can link me to a tutorial or have any ideas - please send them through.

Thanks in advance.

Share this post


Link to post

2 answers to this question

Recommended Posts

  • 0

Sorry for what might seem like a silly question, how do I share a link to an individual text block?

Just so you know where I'm at, I've currently got a code block with:

<div id="hover-div">
  example.before
  <span id="hover-element">
  example.after
  </span>
</div>


and CSS:

#hover-element {
  display: none;
  position: absolute;
  top: 0px
}
#hover-div:hover #hover-element {
  display:block
}

 

Which makes new text appear over the original on hover but can't seem to simultaneously hide the original so it's just doubled up. 

Thanks again. 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...