Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 6406e3b

Browse files
salamanderrexgkalpak
authored andcommitted
docs(tutorial/step_12): change "click" to "hover"
Should be "hover" not "click", since we trigger the change at "mouseenter", not "click". Closes #13831
1 parent 234053f commit 6406e3b

File tree

1 file changed

+4
-4
lines changed

1 file changed

+4
-4
lines changed

docs/content/tutorial/step_12.ngdoc

+4-4
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,7 @@ The name of the starting class is the name of the event that is fired (like `ent
239239
The active class name is the same as the starting class's but with an `-active` suffix.
240240
This two-class CSS naming convention allows the developer to craft an animation, beginning to end.
241241

242-
In our example above, elements are expanded from a height of **0** to **120 pixels** when they're added to the
242+
In our example above, elements are expanded from a height of **0** to **120 pixels** when they're added to the
243243
list and are collapsed back down to **0 pixels** before being removed from the list.
244244
There's also a nice fade-in and fade-out effect that occurs at the same time. All of this is handled
245245
by the CSS transition declarations at the top of the example code above.
@@ -357,10 +357,10 @@ For more on CSS animations, see the
357357
## Animating `ngClass` with JavaScript
358358

359359
Let's add another animation to our application. Switching to our `phone-detail.html` page,
360-
we see that we have a nice thumbnail swapper. By clicking on the thumbnails listed on the page,
360+
we see that we have a nice thumbnail swapper. By hovering over the thumbnails listed on the page,
361361
the profile phone image changes. But how can we change this around to add animations?
362362

363-
Let's think about it first. Basically, when you click on a thumbnail image, you're changing the
363+
Let's think about it first. Basically, when you hover over a thumbnail image, you're changing the
364364
state of the profile image to reflect the newly selected thumbnail image.
365365
The best way to specify state changes within HTML is to use classes.
366366
Much like before, how we used a CSS class to specify an animation, this time the animation will
@@ -369,7 +369,7 @@ occur whenever the CSS class itself changes.
369369
Whenever a new phone thumbnail is selected, the state changes and the `.active` CSS class is added
370370
to the matching profile image and the animation plays.
371371

372-
Let's get started and tweak our HTML code on the `phone-detail.html` page first. Notice that we
372+
Let's get started and tweak our HTML code on the `phone-detail.html` page first. Notice that we
373373
have changed the way we display our large image:
374374

375375
__`app/partials/phone-detail.html`.__

0 commit comments

Comments
 (0)