In addition to changing one property at a time, the .css()
method can accept many CSS property/value pairs at once. You must pass the .css()
method a JavaScript object with a list of key/value pairs like this:
{ color: '#FFFFFF', backgroundColor: '#000000', fontSize: '20px' }
There are a few important differences between the key/value pairs in the object above and the arguments from last exercise. Let’s consider these differences below:
- The object is wrapped by an opening and closing curly brace:
{}
. - Inside the object, there are three key/value pairs. The keys in the example object are
color
,backgroundColor
, andfontSize
. - The values come after the colon
:
of each key. For instance,fontSize
is a key, and its value is'20px'
. - When referencing CSS properties in an object, the property names are camelCased — they are modified to have no quotes or spaces, and to start each new word with a capital letter. Therefore,
background-color
becomesbackgroundColor
, and'font-size'
becomesfontSize
.
To set multiple properties at once, you can pass the whole object into the .css()
method as a single element.
$('.example-class').css({ color: '#FFFFFF', backgroundColor: '#000000', fontSize: '20px' })
In the example above, we use the .css()
method to change the color, background color, and font size values of the .example-class
element.
Instructions
Modify the .css()
methods you wrote in the last exercise to accept one object.
On mouse enter, the object should change the 'color'
to '#C3FF00'
, and should change the backgroundColor
to '#535353'
.
On mouse leave, the object should change the 'color'
to '#EFEFEF'
, and should change the backgroundColor
to '#303030'
.