任务名称：CSS-TASK7

成果链接：http://47.104.248.130/task7.html

任务耗时：2018.12.11-2018.12.16（6）

官网脑图：

个人脑图：

任务7深度思考：

需求：1.当鼠标移动到一个元素A身上时，另外一个元素B显示。 

实现原理：

A元素与B元素有一个相同的父级。

B元素默认隐藏，A元素默认显示。

当鼠标移动到A元素身上时，也可以看做是移动到了A元素的父级身上。A元素的父级获得一个鼠标的hover状态。

css使用： .father:hover .b { display:block } 的方式，来定义鼠标移动到父级身上时，B元素的样式。

html的示例代码：

<div class="father">

    <div class="brother-showing">

        ....

    <div>

    <div class="element">

        .....

    </div>

</div>

1

2

3

4

5

6

7

8

以上示例代码，仅仅示意了基本的html结构，实际之中是使用div还是span或者其他的标签，要视情况而定。

css代码：

.element{

    display:none; //元素默认是隐藏的

}

//当鼠标经过兄弟元素brother-showing时，也就是经过父级father的时候。父级获得hover状态，在父级hover的基础上写element的样式：

.father:hover .element{

    display:block ;

}

1.css半透明设置背景颜色半透明的样式

background：rgba(a,b,c,d)

abc为rgb数值，d为透明值，0-1里选，其他的以此类推。

opacity属性是一个css3属性设置一个元素了透明度级别

opacity属性的值

value 定义元素的不透明度。取值也是0-1。

inherit 让opacity的值继承父元素

2.rgba和opacity的区别

opacity可以对一个元素的所有内容设置透明效果，包括元素自身的内容、背景、边框、字体

opacity会继承父元素的opacity 属性.

rgab只用于元素的一些背景颜色。边框颜色、字体颜色

rgba设置的元素该元素的后代不会继承该属性及属性值

opacity属性是一个css3属性设置一个元素整个的透明度级别

opacity属性的值

value 定义元素的不透明度。取值也是0-1。

最明显使用体验就是opacity使用后包括里面的元素也会透明。