66 lines
1.6 KiB
Markdown
66 lines
1.6 KiB
Markdown
|
---
|
|||
|
|
id: 587d78a5367417b2b2512ada
|
|||
|
|
title: Use the CSS Transform scale Property to Scale an Element on Hover
|
|||
|
|
challengeType: 0
|
|||
|
|
videoUrl: ''
|
|||
|
|
localeTitle: 使用CSS Transform scale属性在悬停上缩放元素
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Description
|
|||
|
|
<section id="description"> <code>transform</code>属性具有多种功能，可让您缩放，移动，旋转，倾斜等元素。当与伪类（例如<code>:hover</code> ，指定元素的某个状态， <code>transform</code>属性可以轻松地为元素添加交互性。这是一个示例，当用户将鼠标悬停在原始大小上时，将段落元素缩放到原始大小的2.1倍： <blockquote> p：悬停{ <br>变换：规模（2.1）; <br> } </blockquote></section>
|
|||
|
|
|
|||
|
|
## Instructions
|
|||
|
|
<section id="instructions">为<code>div</code>的<code>hover</code>状态添加CSS规则，并使用<code>transform</code>属性将<code>div</code>元素缩放到其原始大小的1.1倍，当用户将鼠标悬停在其上时。 </section>
|
|||
|
|
|
|||
|
|
## Tests
|
|||
|
|
<section id='tests'>
|
|||
|
|
|
|||
|
|
```yml
|
|||
|
|
tests:
|
|||
|
|
- text: 当用户将鼠标悬停在其上时， <code>div</code>元素的大小应缩放1.1倍。
|
|||
|
|
testString: 'assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi), "The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.");'
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
## Challenge Seed
|
|||
|
|
<section id='challengeSeed'>
|
|||
|
|
|
|||
|
|
<div id='html-seed'>
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<style>
|
|||
|
|
div {
|
|||
|
|
width: 70%;
|
|||
|
|
height: 100px;
|
|||
|
|
margin: 50px auto;
|
|||
|
|
background: linear-gradient(
|
|||
|
|
53deg,
|
|||
|
|
#ccfffc,
|
|||
|
|
#ffcccf
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<div></div>
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
## Solution
|
|||
|
|
<section id='solution'>
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
// solution required
|
|||
|
|
```
|
|||
|
|
</section>
|