发表于： 2019-11-20 22:57:05
1 468
一、今天完成的事情
需求：当鼠标移动到一个元素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添加几个样式来覆盖所有浏览器的默认外观。
二、遇到的困难
暂时没有
三、明天要做的事情
任务七
四、收获
任务七的总结，之后汇总
返回列表
评论