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.
Insert the highlighted lines 21 to 25 in the index.html
file in your practice folder, then save.
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.
This is the completed site.css file for this tutorial. There are no changes from the previous lesson.