JQuery Beer FAQ Tutorial
Hand Pointer Over FAQ Questions
Section 2, Lesson 5

JQuery Beer FAQ Tutorial
Hand Pointer Over FAQ Questions
Section 2, Lesson 5

 

This step sets the mouse pointer when hovering over the elements with the faq-question class. The goal is to show a hand pointer cursor icon for on all elements with the faq-question class and the default cursor icon on elements that do not have the faq-selected class.

Live Screenshot Web Browser

Insert the highlighted lines 21 to 25 in the index.html file in your practice folder, then save.

Source Code

JQuery offers the method hasClass that returns true or false if a class belongs to what JQuery has selected. On line 21 the hasClass method is applied to the elemens with the faq-question class that caused the hover event. JQuery provides a css method to get and set styles for selected elements. Lines 22 and 24 set the css cursor property according to the if statement logic for a true and false of the hasClass

For more information on CSS cursor property see cursor.

Source Code

This is the completed site.css file for this tutorial. There are no changes from the previous lesson.