CSS mouseover for links, text, and images

admin

The content structure of a web page is coded in HTML (or XHTML), and the way in which the information is displayed is defined by Cascading Style Sheets (CSS).  Some techniques for codingCSS make it possible to add animation and dynamic display to a web page so that it is notnecessary to use JavaScript.  CSS animations have the advantage of being supported by all modern browserseven when a user has turned off JavaScript for security reasons or to avoid some types of advertisements.The XHTML and CSS techniques illustrated here meet all W3C validation standards and  work for Internet Explorer, FireFox, Safari, Opera, and Google Chrome browsers.The description of the code is explained below.
Example of a mouseover with a text paragraph.

English grammar can  be described using aformal descriptionFormal Description
A Formal Description is like a mathematical formula that when applied to words produces a correctly formed sentence structure.  The expression

    <noun phrase> = "the" <specific proper noun>

means that you can create a noun phrase by first writing the article "the" and then writing a specific proper noun.

Example: "the Grand Canyon".

that describes valid sequences of linguistic components.

Example of a mouseover with an image and a caption.

The Body Mass Index
Body Mass Index for Femalesis the most widely used diagnostic tool to identify weight problems within a population.The values of the BMI can usually be used to classify whether individuals are underweight, overweight  or obese.

Example of a mouseover with drop-down list of links

Card Games Freecell Pyramid Shamrocks Castle Yukon Blackjack

Example of a mouseover to change an image.

Discover Madame Flora

Explanation of the coding techniquesIn general, these techniques hide the pop-up text by placing it outside the display area, butrestore it to a visible position when the mouse hovers over the designated zone.


Mouseover with a text paragraph
When the pop-up text is too long, the width of the pop-up text may be specified in the style of the second level span.  A title in the first level span displays additionalinformation on mouseover
  This is a line with a Hot Zone Text  Pop-up Textin the middle.

1. <span class="dropt" title="Title for the pop-up">Hot Zone Text
   
2.   <span style="width:500px;">Pop-up text</span>
   
3. </span>

复制代码

CSS code for class dropt:

1. span.dropt {border-bottom: thin dotted; background: #ffeedd;}
   
2. span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; }
   
3. span.dropt span {position: absolute; left: -9999px;
   
4.   margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
   
5.   border-style:solid; border-color:black; border-width:1px; z-index: 6;}
   
6. span.dropt:hover span {left: 2%; background: #ffffff;}
   
7. span.dropt span {position: absolute; left: -9999px;
   
8.   margin: 4px 0 0 0px; padding: 3px 3px 3px 3px;
   
9.   border-style:solid; border-color:black; border-width:1px;}
   
10. span.dropt:hover span {margin: 20px 0 0 170px; background: #ffffff; z-index:6;}

复制代码

Mouseover with an image and a caption
An image can also be displayed using the same dropt class.
  This is a line with a Hot Zone Text  
   Caption  in the middle.

1. <span class="dropt" title="Title for the pop-up">Hot Zone Text
   
2.   <span><img src="card.jpg"/><br/>
   
3.   Caption
   
4.   </span>
   
5. </span>

复制代码

Mouseover with drop-down list of links
A drop-down list of links can be generated from nested unordered lists using the dropv class.

Example of

drop-down links in imbedded text. Link one Link two Link three

In order to position the drop-down list under the link, it is necessary to havethe link at the beginning of a line, or to code the dropv class within a column of a table, which then can be positioned as needed.
NOTE: If the list is to drop down over a flash object, it is necessary to code the flash objectwith wmode="opaque" or wmode="transparent", otherwise the drop-down list will be behind the object.

1. <table>
   
2. <tr>
   
3.   <td>
   
4.    Example of                        
   
5.   </td>
   
6.   <td>
   
7.    <ul class="dropv">
   
8.    <li><a href="#">drop-down links</a> in imbedded text.       
   
9.     <ul>
   
10.       <li><a href="#">Link one</a></li>
    
11.       <li><a href="#">Link two</a></li>
    
12.       <li><a href="#">Link three</a></li>               
    
13.      </ul>
    
14.     </li>
    
15.    </ul>                       
    
16.   </td>       
    
17. </tr>
    
18. </table>

复制代码

CSS code for class dropv:

1. .dropv, .dropv ul {padding: 0; margin: 0; list-style: none;}
   
2. .dropv a {display: inline; width: 170px;}
   
3. .dropv li {float: left; padding: 0px 8px 2px 0px;}  /* all list items */
   
4. .dropv li ul {position: absolute; background: #993399;
   
5.   padding: 0px 0px 0px 4px; width: 170px; left: -9999px;} /* second-level lists */
   
6. .dropv li:hover ul {left: auto; } /* nest list under hovered list items */
   
7. .dropv li ul li a {color: #ffffff; text-decoration: none; display: block;}
   
8. .dropv li ul li a:hover {color: yellow; background:#663399;}

复制代码

Mouseover to change an image.
The effect of swapping an image on mouseover may be achieved by overlapping two picturesand hiding the top one when the cursor hovers over the area.  The whole span maybe encompassed with an <a> tag if a page link is needed.  Since the span can be active over the entire horizontal area of the screen, it is a good idea to code the span within a table to restrict the area that activates the rollover of the image.
                                               

1. <span class="imgswap">
   
2. <img src="top-image.jpg" alt=""/>
   
3. </span>

复制代码

CSS code for class imgswap:

1. span.imgswap {background-image:url("bottom-image.jpg");
   
2.   background-repeat: no-repeat; display:block;}
   
3. span.imgswap:hover img {visibility:hidden;}

复制代码

Antonio Zamora