spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / dhtml / diner / hover
DHTML Diner Logo

This is an Internet Explorer 4 technique. The in-page examples will only work in Explorer 4 Windows and Explorer 4 Macintosh.

Developer News
Mandrake Linux Founder Back, Virtually
Amazon: We're a Technology Company
Sun Expands MySQL With Closed Source

The CSS2 :hover pseudo-class

The newly released Cascading Style Sheets Level 2 Proposed Recommendation (CSS2) includes a new, dynamic pseudo-class: hover:

"The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element."
Read the complete dynamic pseudo-classes specification

When we apply the :hover pseudo-class to an element, the CSS properties declared in the pseudo-class will take effect when we mouseover the element, and cease when we mouseout. It is like changing the class of an element upon mouseover and changing back to the original class on a mouseout. See Doc JavaScript's Text Rollovers for a discussion of dynamic class change to create rollover effects.

By using :hover, however, we can create dynamic class changes without the need for script and with minimal page HTML intervention.

Currently, :hover is implemented only by Explorer 4, and only for the A element, and only when it is a link (contains HREF= attribute).
Read the Microsoft documentation in the Internet SDK

Defining :hover

The complete DHTML Lab site uses :hover to change the normally red links to blue, upon mouseover. All we need is a single line in our STYLE:

<STYLE TYPE="text/css">

    A:hover {color:blue}

</STYLE>

If we include A:hover {color:blue} in an external stylesheet, then any page that uses the style sheet will have blue text rollovers for links. :hover changes only the properties declared in the :hover definition. All other properties remain the same. If we were to use this STYLE:

<STYLE TYPE="text/css">

    A {
        color:red;
        font-family:sans-serif;
        font-weight:bold;
        font-size:14pt;
        text-decoration:none;
    }
    
    A:hover {color:blue}

</STYLE>

The result would be:

  DHTML Lab   (mouse over link)

The :hover pseudo-class can also be applied to classes of links or to unique instances.



Produced by Peter Belesis and

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Whitepapers and eBooks

Symantec Whitepaper: Converging System and Data Protection for Complete Disaster Recovery
Intel Whitepaper: Comparing Two- and Four-Socket Platforms for Server Virtualization
IBM Solutions Brief: Go Green With IBM System xTM And Intel
HP eBook: Simplifying SQL Server Management
IBM Contest: Are You the Next Superstar? Join the "Search for the XML Superstar" Contest to Find Out
Intel PDF: Quad-Core Impacts More Than the Data Center
Intel PDF: Virtualization Delivers Data Center Efficiency
Go Parallel Article: PDC 2008 in Review
Avaya Article: Communication-Enabled Mashups: Empowering Both Business Owners and IT
Intel Whitepaper: Building a Real-World Model to Assess Virtualization Platforms
PDF: Intel Centrino Duo Processor Technology with Intel Core2 Duo Processor
Microsoft Article: Build and Run Virtual Machines with Hyper-V Server 2008
  Go Parallel Article: Q&A with a TBB Junkie
IBM Whitepaper: Innovative Collaboration to Advance Your Business
Internet.com eBook: Real Life Rails
IBM eBook: The Pros and Cons of Outsourcing
Internet.com eBook: Best Practices for Developing a Web Site
IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Symantec Whitepaper: Comprehensive Backup and Recovery of VMware Virtual Infrastructure
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
webref The latest from WebReference.com Browse >
Popular JavaScript Framework Libraries: An Overview - Part 3 · Accessing Your MySQL Database from the Web with PHP · Working with the DOM Stylesheets Collection
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Fixing MySQL Replication · Firewall Guide: First Steps to Securing the Enterprise · VoxOx Tames the Tumultuous Communications Tangle

All Rights Reserved. Legal Notices.
Created: May 07, 1998
Revised: May 07, 1998

URL: http://www.webreference.com/dhtml/diner/hover/