Zebra Hover

Before we begin here are some terms that you should become familiar with!

addClass()

Adds the specified class to each element that is specified by said class.

removeClass()

Removes the class that was specified by the add class

What You'll Be Learning

You will be learning to not only give a table a zebra stripped effect but you will also be learning how to add a hover state to the table.

This can be useful for changing a boring hard to read table into a vibrant ledgable table.

How to execute.

What should you know?

To begin with the zebra hover you must first make sure you have aquired all of the proper scripts given to you in the first lesson.

Steps

First you will build a table like the one below

From there you will write you scripts and styles like the ones listed two columns down.

After that you should have a working zebra stripped table with a hover state.

Example

Top End Guitars

6 String 7 String 8 String
Schecter Omen-6 Schecter SGR C-7 Schecter Hellraiser C-8
Esp LTD EC-1000 ESP LTD M-17 ESP STEF B-8
Ibanez RG450DX Ibanez GR7420 Ibanez RG8

Code Required

HTML Markup

<table class="guitars" id="guitars">
      <h3> Top End Guitars </h3>
        <thead>
         <tr>
            <th>6 String</th>
            <th>7 String</th>
            <th>8 String</th>
            
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Schecter Omen-6</td>
            
            <td>Schecter SGR C-7</td>
            <td>Schecter Hellraiser C-8</td>
          </tr>
          <tr>
          <td>Esp LTD EC-1000</td>
          <td>ESP LTD M-17</td>
          <td>ESP STEF B-8</td>
          </tr>
          <tr>
            <td>Ibanez RG450DX</td>
             <td>Ibanez GR7420</td>
            <td>Ibanez RG8</td>
            
          </tr>
        </tbody>
      </table>

CSS Markup

.zebra{
	background-color:#fff;
	color:#666666;	
}
tr.zebraHover{
	background-color:#0089FF;
}
#guitars{
	width:100%;
	height:400px;
	font-size:30px;
	font-family: 'Open Sans', sans-serif;
	color:white;
}

Javascript Markup 

$(document).ready(function() {  //sets the document ready function
  $('#guitars tbody tr:even').addClass('zebra'); //adds class of zebra
  $('#guitars tbody tr').mouseover(function(){ // add mouseover
	  $(this).addClass('zebraHover'); //add class of zebrahover
  }); //closese mous over
  $('#guitars tbody tr').mouseout(function(){ // adds mouseout
	  $(this).removeClass('zebraHover'); //removes class of zebra hover 
  }); //ends mouse out function
});//end document

Back