一、今天完成的事情

需求：当鼠标移动到一个元素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>

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

css代码：

.element{

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

}

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

.father:hover .element{

    display:block ;

}

什么是Input Range

Input Range 对象是 HTML5 新增的。
Input Range 对象表示使用 type="range" 属性的 HTML <input> 元素。

注意： Internet Explorer 9及更早IE版本不支持使用 type="range" 属性的 HTML <input> 元素。.

访问 Input Range 对象

你可以使用 getElementById() 函数来访问使用 type="range" 属性的 <input> 元素:

var x = document.getElementById("myRange"); 尝试一下
提示： 你同样可以通过表单的元素集合来访问 Input Range 对象。

创建 Input Range 对象

你可以使用 document.createElement() 方法来创建使用 type="range" 属性的 <input> 元素：

var x = document.createElement("INPUT");
x.setAttribute("type", "range");

为了简化生成跨浏览器兼容的样式的过程，我们引进LESS。当然也有CSS版本。
添加基础CSS样式

我们需要给range input添加几个样式来覆盖所有浏览器的默认外观。

二、遇到的困难

暂时没有

三、明天要做的事情

任务七

四、收获

任务七的总结，之后汇总