5 Mouse Over Style for Dynamic Content Change

Generally the entire content on a HTML page has a predefined style using external stylesheet. There are many situations you may need to use specific styles in order to highlight a portion of the content. Generally this technique is used to attract users to get their attention and you can dynamically change the content using JavaScript “onMouseOver” event. Let us discuss how to dynamically change content for the following scenarios:

1. Dynamically Changing Font Family

Static Font Family Change Using HTML

The traditional method is to highlight the content permanently by using face attribute of HTML <FONT> tag. Below is an example of how <FONT> tag is used to change the font family of three sentences of a single paragraph.

This is Arial font This is Verdana font This is Calibri font.

Here is the HTML code for the same:

<p><font size=5 color=Red face=Arial>This is Arial font </font>
<font size=5 color=Green face=Verdana>This is Verdana font </font>
<font size=5 color=Green face=Calibri>This is Calibri font </font></p>

Dynamically Changing Font Family of a Content

Changing font family with HTML <FONT> tag is static and permanent which may distract the users between the important and normal content. The other way is to dynamically change the font family of a content to be highlighted in a webpage whenever the visitor moves the mouse over it. Below is the widget code for changing font family dynamically using JavaScript “onMouseOver” event.

<SPAN STYLE="color:darkgreen"
onMouseOver="this.style.fontFamily = 'Verdana'"
onMouseOut="this.style.fontFamily = 'Arial'">
Move the mouse here to see the font change with the mouse movement?
This can be used to highlight certain portions of your site content
</SPAN>

Basically, we assume the default font family of the content is “Arial” and on mouse over it will be changed to “Verdana”. the “onMouseOut” event is used to reset the font family back to the default “Arial” so that it will look appropriately.

The result of the above code is shown below, move your mouse over and check the dynamic change of the font family to “Verdana”.

Move the mouse here to see the font change with the mouse movement? This can be used to highlight certain portions of your site content

Related: How to change font in WordPress site?

2. Dynamically Changing Content

Changing Content Dynamically

JavaScript onMouseOver event is used to implement many on-page interactive features without contacting the server. Here is one of such a feature to change the content dynamically which can be used to show more details of that particular word or content.

Move your mouse over the below content in the result box to see it changed dynamically.

WebNots

Below is the code the effect:

<font size=4>
<A HREF="https://www.webnots.com/">
<FONT onMouseOver="this.innerHTML = 'WebNots Web Consulting Services'"
onMouseOut="this.innerHTML = 'WebNots'">WebNots</FONT></A>
</font>

Showing Tooltip in a Webpage

If you want to show a tooltip which will be shown on a mouse over then title attribute can be used with any of the HTML element. Below is an example using <abbr> tag and hovering over the text “WebNots” will show a tooltip.

WebNots is an useful site.

And the code for the above result is:

<abbr title="WebNots Web Consulting Services">
<font size=4 color=green>
<b>WebNots</b></abbr> </font>
<font color=blue>is an useful site.</font>

3. Dynamically Changing Font Size

The simple way to change the font size of any particular portion of the content is by using size attribute of HTML <FONT> tag. Below is an example how <FONT> tag is used to increase the size of the content.

This is highlighted bold content in red color using font size = 6

HTML code for the same is:

<font size=6 color=Red>
This is highlighted bold content in red color using font size = 6
</font>

The static loading of increased font size like above may disturb the user experience. Hence the other simple way is to dynamically change the font size of a content without going back to the server. The font size will only change whenever the visitor moves the mouse over it which provides better user experience. Here is the widget code for changing font size dynamically on mouse over.

<SPAN STYLE="color:red"
onMouseOver="this.style.fontSize = '25px'"
onMouseOut="this.style.fontSize = '20px'">
Move your mouse in and out of this paragraph! You can magnify the text when you move your mouse over here!
</SPAN>

And the result of the above code is:

Move your mouse in and out of this paragraph! You can magnify the text when you move your mouse over here!

Here, the fontsize is used as 25px when the mouse is moved on the text and 20px when the mouse is moved out of the text. You can change this to any desired size in order to align with your site content.

Related: How to change font in Weebly site?

4. Dynamically Changing Font Color

Most of the time webmasters need to divert the attention of site visitors to an important content or a particular section in that page. The traditional method is to highlight the content permanently by using different font colors with HTML font tag. Below is an example how <FONT> tag is used to highlight content.

Red Color Green Color Blue Color

HTML code for the same is:

<font size=5 color=Red>Red Color </font>
<font size=5 color=Green>Green Color </font>
<font size=5 color=Blue>Blue Color</font>

The other simple way is to dynamically change the font color of a content to be highlighted in a webpage without going back to the server. The content color will only change whenever the visitor moves the mouse over it. In this way all the content of a page will looks similar when the page is loaded and the important content color is changed when the visitor really do some action.  Here is the widget code for changing font color dynamically on mouse over.

<H3 onMouseOver="this.style.color = 'blue';" onMouseOut="this.style.color = 'red';">
See what color I take when you move your mouse over me! And what happens when you take your mouse out??
</H3>

Check out the result of the above code.

See what color I take when you move your mouse over me! And what happens when you take your mouse out??

Change Font Color with Background

You can also change the font color of the content along with the background color. This is useful especially the content is placed inside a table element. Below is the code for changing the font and background color.

<font face="Verdana" size="4"
style="color:#2172A1"
onMouseOver="this.style.color='white';this.style.backgroundColor='#2172A1'; this.style.cursor='hand';"
onMouseOut="this.style.color='#7122A1';this.style.backgroundColor='#95BED4';">
Move mouse over to see the font color changes with the background color
</font>

And here is the result…

Move mouse over to see the font color changes with the background color

5. Dynamically Changing Cursor Style

The cursor attribute of a style tag can be used to change the cursor with the predetermined styles. This can be used inline with any HTML tag. Here is an example using anchor tag, move your mouse over the anchor text and see the cursor style.

WebNots Web Consulting Services

HTML code for the same is given below.

<font size=4>
<a href="https://www.webnots.com" style="cursor:help">
WebNots - A Knowledge Sharing Platform for Webmasters
</a>
</font>

The attribute value used in the above example is “help” and below are the acceptable attributes of a cursor element.

Cursor element can be used with any HTML tag and here is an another example with an image tag using a cursor attribute value of crosshair. Move the mouse over the image to see the cursor changes to a crosshair style.

Warning: All the mouse over events will not work on mobile devices where there is no need to use a mouse.