CSS Change Text

CSS Change Text On Hover

CSS is known for styling, but it can be used to emulate a complex programming language. For example, the pseudo-selector hover can be manipulated to replace text. This works with CSS 2.1 and up and all browsers that support the hover function.

The entire text is present on the screen. The text is broken up into parts to be hidden until required and parts that are shown by default. When a user hovers over the text, the hidden part is shown and the default text is hidden.

This tutorial uses the HTML and CSS hover function. The CSS hover function is used to show hidden text.

    Tools are required:

  • Text editor.
  • HTML.
  • CSS.
  • Browser to view output.

Optional Download and install suitable text editor

Any text editor with regular expression support will work. To select a reviewed lightweight programming editor read the Ojambo.com Lightweight Programming Editors.

CSS-Change-Text.html file

  Copyright 2011 Edward <http://ojambo.com>
  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.
  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  GNU General Public License for more details.
  You should have received a copy of the GNU General Public License
  along with this program; if not, write to the Free Software
  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
  MA 02110-1301, USA.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

	<title>Ojambo.com CSS Change Text On Hover</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<style type="text/css">
		p span.show {
		p:hover span.show {
		p:hover span.noshow {

		<span class="noshow">Normal Text</span><span class="show">Hover Text</span>



The CSS used in an internal style sheet inside the head tags.

How to Use:

Run the CSS-Change-Text.html file in your favourite browser.
Hover over the text to see the new (hidden) text.


Ojambo.com CSS Change Text Tutorial

Image Missing
Ojambo.com CSS Change Text Tutorial


CSS is not just for styling content. With some imagination, the hover function can be used to emulate changing text. It works by diving text is two parts, one is the default and the other is hidden. The hidden text will be shown during the hover event.


  1. Use CSS to eliminate the need to run server-side code.
  2. Use CSS to eliminate the need to run JavaScript code.
  3. Do not assume users want or have enable JavaScript.

Tags: , , , ,

This entry was posted on Wednesday, October 19th, 2011 at 12:00 am and is filed under Tips & Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “CSS Change Text”

  1. Ojambo CSS Change Text Video 0036 Says:

    December 9th, 2011 at 12:04 pm

    […] Video for the Ojambo.com CSS change text article. Part One of […]

  2. Ojambo CSS Sticky Footer Video 0037 Says:

    March 2nd, 2012 at 12:12 am

    […] Video for the Ojambo.com CSS sticky footer article. Part One of […]

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>