Short 8-2 Create a FAQs Rollover

application

In this exercise, youll write the jQuery code for an application that displays the

answer to a question in a list of questions when the user hovers the mouse over that

question. Estimated time: 10 to 15 minutes.

1.

Open the HTML and JavaScript files in this

folder:

exercises_short\ch08\faqs_rollover\

2.

Review the HTML to see that it includes an unordered list with list items that

consist of an h2 element

and a

element. The h2 element contains a question,

and the

element, which is hidden, contains the answer to the

question.

3.

Add jQuery code that runs when the user moves the mouse pointer into or out

of

a question in the list. When the mouse pointer

moves into the question, the

answer should be displayed. When the mouse pointer moves out of the question,

the answer should be

hidden.

css

body { font-family: Arial, Helvetica, sans-serif; margin: 0 auto; padding: 20px; width: 600px; border: 3px solid blue; } h1, ul { margin: 0; padding: 0; } h2 { font-size: 125%; cursor: pointer; } ul { list-style-type: none; } .hidden { display: none; }

jQuery FAQs

• What is jQuery?

  jQuery is a library of the JavaScript functions that you're most likely to need as you develop websites.

• Why is jQuery becoming so popular?

  Three reasons: It's free; It lets you get more done in less time; All of its functions are cross-browser compatible.

• Which is harder to learn: jQuery or JavaScript?

  For most functions, jQuery is significantly easier to learn and use than JavaScript. But remember that jQuery is JavaScript.

JS

$(document).ready(function() {

}); // end ready