If you mouseover the pink text (with an HTML tag of <code>) you will notice it turns purple. Likewise, when you
mouseout, it turns back to its original, pink color. Let's see how this is done:
If one clicks on a button, and then mouseouts, again the styling changes:
So, let's examine what is happening in these cases:
Everything is encapsulated within the $(document).ready(function() {}); that starts on line 1 of the first
code block.
Then, on line 2, we tell jQuery firstly what to target, and what it should "look out for".
Thus, in these cases, we tell it to listen for either a mouseover or a click, depending on the code block
we are reading.
Lines 3 and 4 tell jQuery what to do once it has "heard" the call of line 1 - in these cases, to change
the CSS settings.
Line 7 then tells the code to look out for a new event - that being either a mouseleave or a mouseout.
Lines 8 and 9 change the CSS styling back to as before.
Notice the use of this in the third code block. Effectively, it means to target only the element (etc)
that has been clicked. We'll go into this in more depth here.
Also, we do not have to target the same thing as we target on line 2 in the following lines. If you mouse over this line of text,
which has a class name grayBackground, you'll notice that the code block backgrounds turns gray while their texts turn white.
Events:
There is a comprehensive list of events here, but let's try a few basic ones here:
.fadeIn()and.fadeOut():
.slideIn()and.slideOut():
.show()and.hide():
.fadeTo():
.toggle():
.fade():
Mouse over and then away from the image.
