jQuery hover

jQuery .hover() helps you add flashy things to your Web page. Wave your mouse over this paragraph to see some colourful demonstrations.

The HTML

How do we perform the magic? Look at the opening paragraph with the colours. The following section shows the paragraph with the HTML exposed.

<><p id="colours" style="background-color: #ffff00; padding: 1em;">
  jQuery <span style="background-color: #000099; color: white; padding-left: 0.5em; padding-right: 0.5em">.hover()</span>
  helps you add <span style="background-color: #ff6600; color: white; padding-left: 0.5em; padding-right: 0.5em">flashy</span>
  things to your <span style="background-color: #009999; color: white; padding-left: 0.5em; padding-right: 0.5em">Web</span> page.
  Wave your mouse over this paragraph to see some colourful demonstrations.
</p>

The jQuery/Javascript code

The following section shows the complete jQuery/Javascript combination. Do not panic. We will split it into smaller bits.

<script type="text/javascript">
jQuery(function() {
  jQuery('body').data('css-background-color', jQuery('body').css('background-color'))
    .data('css-color', jQuery('body').css('color'));
  jQuery('#colours').data('css-background-color', jQuery('#colours').css('background-color'))
    .data('css-color', jQuery('#colours').css('color'));
  jQuery('#colours').each(function() {
    jQuery(this).hover(function() {
      jQuery('body').css('background-color',  jQuery(this).css('background-color'))
        .css('color',  jQuery(this).css('color'));
    }, function() {
      jQuery('body').css('background-color', jQuery('body').data('css-background-color'))
        .css('color', jQuery('body').data('css-color'));
    });
  });
  jQuery('#colours').find('span').each(function() {
    jQuery(this).hover(function() {
      jQuery('#colours').css('background-color',  jQuery(this).css('background-color'))
        .css('color',  jQuery(this).css('color'));
    }, function() {
      jQuery('#colours').css('background-color', jQuery('#colours').data('css-background-color'))
        .css('color', jQuery('#colours').data('css-color'));
    });
  });
});
</script>

The script element

You insert Javascript and jQuery through a link to a file or in your Web page wrapped inside a script element. The following script element example looks simple. The real problem with Javascript is deciding where to put it in your page to make the Javascript work after page elements are loaded. JQuery provides a really easy way to run the code at the right time.

<script type="text/javascript">
).</script>

Run everything after the page is loaded

The following example shows the outer layer of jQuery wrapped around our hover code. The outer layer delays the code until the page is loaded. Everything runs inside the function defined by this wrapper layer.

<script type="text/javascript">
jQuery(function() {
});
</script>

jQuery lets you write everything with jQuery represented by jQuery() or $(). $() is unreliable when several code libraries are used on the one page. We use jQuery().

Save the existing settings

The following lines of jQuery save the existing colours for the page and the demonstration paragraph. jQuery('body') selects the whole HTML body while jQuery('#colours') selects the paragraph by id.

  jQuery('body').data('css-background-color', jQuery('body').css('background-color'))
    .data('css-color', jQuery('body').css('color'));
  jQuery('#colours').data('css-background-color', jQuery('#colours').css('background-color'))
    .data('css-color', jQuery('#colours').css('color'));

stores data for us and is the jQuery equivalent to a variable. .data('css-color', 'zz') would store the string 'zz' for us. .data('css-color', jQuery('body').css('color')) first retrieves the HTML body the finds the CSS for the body then finds the colour defined in the CSS then stores the result in the data field.

We repeat the process for the paragraph and two CSS values for each paragraph.

Select the paragraph

We can select the paragraph by id, '#colours', then use .each() to run some code on the paragraph.

  jQuery('#colours').each(function() {
  });

Add hover to the paragraph

.hover() can add one lot of code to the paragraph to handle mouse movements in and out. .hover() can optionally add two lots of code to the paragraph with the first lot handling mouse movements in and the second lot handling mouse movements out. We add two lots of code using the format shown next.

    jQuery(this).hover(function() {
    }, function() {
    });

Add mouse in action to hover

.hover() accepts a mixture of jQuery and Javascript through the function() {} format. We use the following jQuery to change the background colour and font colour on the body of the HTML page. The code is running in the selected paragraph and we can access the paragraph as this. We access and change the CSS attributes using .css(). .css() returns the paragraph that is input to .css() which means we can string together many CSS actions using the format .css().css().css().

      jQuery('body').css('background-color',  jQuery(this).css('background-color'))
        .css('color',  jQuery(this).css('color'));

Add mouse out action to hover

On mouse out, we use the following jQuery to change the background colour and font colour on the body of the HTML page. Note that we are restoring the colour values saved in the body at the start of the process.

      jQuery('body').css('background-color', jQuery('body').data('css-background-color'))
        .css('color', jQuery('body').data('css-color'));

Select the spans in the paragraph

We can select the span elements in the paragraph by id, '#colours', to get the right paragraph then use .find('span')() to find each span in the paragraph. We use the same .each() to run some code against the spans.

  jQuery('#colours').find('span').each(function() {
  });

Add hover to the paragraph

We add two lots of code using the same format as used for the paragraph. The code, shown next, is exactly the same as used in the paragraph because, in this case, this contains a span instead of the paragraph.

    jQuery(this).hover(function() {
      jQuery('#colours').css('background-color',  jQuery(this).css('background-color'))
        .css('color',  jQuery(this).css('color'));
    }, function() {
      jQuery('#colours').css('background-color', jQuery('#colours').data('css-background-color'))
        .css('color', jQuery('#colours').data('css-color'));
    });

De-duplicate

Hey, we are into the big technical terms here. De-duplicate. There is duplication of code and we can remove the duplication of code by moving the duplicated code into a function.

Think of the numbering system 1, 2, many. If code occurs once, there is nothing to de-duplicate. If code occurs twice, there is a trade off between reducing code duplication and the extra processing overhead of starting a function. When the same code is used in many places, the code reduction always produces more benefit than the slight overhead of starting a function.

jQuery hover de-duplication example shows the code from this page with the duplication removed and explains the changes. The page assumes you read this page first.