css的样式(一)

CSS属性篇

今天我们来通过设置CSS属性来实现鼠标悬浮放大或缩小区域，以及鼠标移入导致文本或背景颜色的改变。

鼠标悬停字体变大或界面颜色改变

鼠标悬停字体变大和改变颜色需要用到hover动态伪类选择器

hover动态伪类选择器

当我们用鼠标移入一个组件时，界面颜色会发生变化，这个时候我们就需要使用hover动态伪类选择器，废话不多说，我们来展示一下CSS代码片：

			#button1:hover{
                background-color: darkkhaki;
            }
            .c2{
                border: 5px solid coral;
                margin: 40px;
                padding: 15px;
            }
            #button2:hover{
                background-color: blueviolet;
            }
            .c3{
                border: 5px solid darkblue;
                margin: 40px;
                padding: 15px;
            }
            #button3:hover{
                background-color: chocolate;
            }
            .c4{
                border: 5px solid hotpink;
                margin: 40px;
                padding: 15px;
            }
            #button4:hover{
                background-color: hotpink;
            }

接下来是HTML代码片:

			.a1{
                border: 5px solid rosybrown;
                width:  293px;
                height: 200px;
                background-color: rosybrown;
            }
            #i2:hover{
                transform: scaleY(1.5);
            }
            .a2{
                border: 5px solid darksalmon;
                width: 293px;
                height: 200px;
                background-color: darksalmon;
            }
            #i3:hover{
                transform: scaleY(1.5);
            }
            .a3{
                border: 5px solid dodgerblue;
                width: 293px;
                height: 200px;
                background-color: dodgerblue;
            }
            #i4:hover{
                transform: scaleY(1.5);
            }

这里我们注意，在伪类选择器中我们使用了css中的transform属性，这样我们就可以实现鼠标实现界面颜色变化。
注意：
1、首先知道DIV和IMG的层次关系，IMG是在某DIV里面，图片放大后不应该超出DIV的盒子。

2、设置DIV的 overflow: hidden; 属性，作用是图片变大后超过DIV区域的部分会自动隐藏。

3、设置 transition: all 0.6s; 属性和 transform: scale(1.4); 属性，其中 transition: all 0.6s; 是变化速度，数值越小速度越快，而 transform: scale(1.4); 是变化范围， scale(1.4) 是放大1.4倍的意思。

4.如果想图片放大后完全显示，而不是只显示DIV里的区域，那么我们只需把div的 overflow 属性去掉即可，不能设为 auto ，否则div出现滚动条