HTML - mouseover

written Sept 2000 being revised May 2006
Google site search

Time moves on and CSS develops in its use. However CSS becomes more complex, conformance issues become a problem with virtually all browsers and there is a move to small-footprint browsers with no CSS. So in a sense we are no further forward except that we no longer rely on javascript to acheive many webpage effects. Much more stuff can now be done in CSS in some browsers. There is still difficulty maintaining the old and the slim with the new and fat.

1   Links with Mouseover and :hover

CSS provides for a :hover activitiy which provides similar functionality to javascript on mouseover events. This is a way to highlight links which may be graphic and bordered and move away from the underline/border protocol for links.

We have a protocol for links - underlined text, bordered images - and to break with a simple protocol is to only serve to confuse people. So why do it ? To seduce the viewer with eye candy. This means that nice colour and graphic design need to be employed to effect the desired result. The mouseover effectively becomes a new link standard. This means that if it is to be used it should be used uniformily over the site.

Example 1

<title>Chapter 4 -  Term Project - Graphical Painter</title>

<style type="text/css">
#ex1  a:link {
  background-color: #bbffbb;
  color: #888888;
#ex1 td a:visited
  background-color: #bbffbb;
  color: #ffdd88;

#ex1 td a:hover {
  background-color: #cecbc6;
  color: #000066;

#nav ul {
  display: block;
  list-style: none outside;
  padding: 0;
  margin: 0 0 0 10px;
  font-family: Verdana, sans-serif;
  font-size: x-small;

#nav li {
  padding: 0;
  margin: 0 4px 0 0;
  border-top: 1px solid #cecbc6;
  border-right: 1px solid #cecbc6;
  border-left: 1px solid #cecbc6;
  background-color: #000066;
  color: #ffffff;
  font-weight: bold;
  /* the next 4 lines are magic */
  display: block;
  float: left;
  position: relative;
  top: -1.32em;

#nav a:link,
#nav a:visited {
  background-color: #000066;
  color: #ffffff;
  text-decoration: none;
  padding-left: 1em;
  padding-right: 1em;

#nav a:hover {
  background-color: #cecbc6;
  color: #000066;

#navclear {
  display: none;
html>body #navclear {
  display: block;
  clear: both;

/* ----- now highlight active tab based on body @class attribute ----- */

body.index #nav li#nav-index a,
body.about #nav li#nav-about a,
body.archives #nav li#nav-archives a,
body.projects #nav li#nav-projects a, #nav li#nav-pictures a,
body.syndication #nav li#nav-syndication a,
body.links #nav li#nav-links a {
  background-color: #fff;
  color: #000066;
<div id=ex1>
<table><tr><td id=ex1>
    <a href=example2.html id=ex1 >Example </a>

    <a href=example2.html ><img src=example1a.jpg ></a>

<div id="nav">
<li id="nav-index"><a href="/">Home</a></li>
<li id="nav-about"><a title="about this site" href="#" accesskey="9" rel="help">About</a></li>
<li id="nav-archives"><a title="old posts" href="#" rel="contents">Archives</a></li>
<li id="nav-projects"><a title="small projects, scripts, fun stuff" href="#">Projects</a></li>
<li id="nav-pictures"><a title="dog pictures and stuff" href="#">Photos</a></li>
<li id="nav-syndication"><a title="syndicated versions of "dive into mark"" href="#">RSS</a></li>
<li id="nav-links"><a title="my daily reading" href="#">Links</a></li>
<span id="navclear"></span>


For this example we use the id attribute to reference style. The style sheet contains entries of the form #name, #name td , #name td a , #name td a:hover , td#name etc. The id attribute name (or class) is invoked in the html by using the id='name' attribute.

©2000 - 2006 WEBSCOOL This page last updated 19 May 2006. All rights reserved - including copying or distribution of any portion of this document in any form or on any medium without authorisation. For more regarding the copyright.