谁通过好过网办过美国签证好办吗 求实情

来源：蜘蛛抓取(WebSpider) 时间：2017-09-06 16:22 标签： 开封求实高中收费情况
在CSS中hover是指鼠标移入和移出两个事件，利用CSS实现这个效果非常的简单，可是如果放在JS中，我们就必须解析成两个事件：onmouseover和onmouseout。做起来的话相对于CSS略显复杂，这里我便分享一下我利用JS实现此效果的过程，这是我在制作选项卡时用到的，因此大家也可以看看选项卡是怎么制作的。
首先在HTML中设置三个input按钮和三个div(选项卡的内容)：代码如下：
&head lang="en"&
&meta charset="UTF-8"&
&title&&/title&
background: white;}
.yellow{background: yellow}
div{width:<span style="color: #px;height:<span style="color: #px;background: red;display: none}
&/style&&/head&&body&&input class="white" type="button" value="1"/&&input type="button" value="2"/&&input type="button" value="3"/&&div style="display: block"&111&/div&&div&222&/div&&div&333&/div&&/body&
此时你会发现页面上有三个按钮的一个DIV，我们就是利用选中一个按钮，一个div的display变为block,其他的变成none来实现的。代码如下：
&script type="text/javascript"&
window.onload= function () {
var but=document.getElementsByTagName("input");
var odiv=document.getElementsByTagName("div");
for(var i=0;i&but.length;i++){
but[i].index=i;
but[i].onclick= function () {
for(var i=0;i&but.length;i++){
but[i].className="";
odiv[i].style.display="none";
this.className="yellow";
odiv[this.index] .style.display="block";
};&/script&
阅读(...) 评论()网页设计教程与开发
提供各种常见网页效果
提供各种各样的设计教程
装扮QQ，让QQ变得更酷
设计参考，提高自升水平
学习服务器和操作系统
提供各种素材和工具
收藏学习资料
您现在的位置：&&>>&&>>&&>>&&>>&正文
CSS3实例教程:hover、active和:focus伪选择器
破洛洛文章简介：CSS3实例教程:hover、active和:focus伪选择器。
CSS3的伪类选择器就是多，今天我们来学习新的伪类选择器&&UL状态伪类选择器。这些选择器都有一个共同的特征名那就是定义的样式只有当元素处于某种状态下时才起作用，在默认状态下无效。　　今天我们先来接触:hover、active和:focus这三种状态伪类选择器。:hover选择器、:active选择器和:focus选择器　　:hover选择器：当鼠标悬停在所指定的元素上时所使用的样式；　　:active选择器：当所指定的元素处于激活状态（鼠标在元素上按下还没有松开）时所使用的样式；　　:focus选择器：当元素获得光标焦点时使用的样式，主要用在文本框输入文字时使用；　　【注】下方案例运行效果，之所以点击后立即变为绿色是因为active触发的同时focus也触发了，所以active定义的样式看似无效，大家可以先把focus定义的样式注释掉运行；
&!DOCTYPE HTML&&&html&&&&& &head&&&&&&&&& &meta charset=&gb2312&&&&&&&&&& &title&CSS3实例教程:hover、active和:focus伪选择器&&网页教学网&/title&&&&&&&&& &style type=&text/css&&&　　　　*{margin:0; padding:0;}&　　　　body{margin-bottom:20 font-family:&Microsoft yahei&; font-size:14}&　　　　ul{margin:50 width:260 height:100 list-style:}&　　　　　　ul li{margin-bottom:10 overflow:}&　　　　　　　　label,input{display: float:}&　　　　　　　　label{padding-right:8 width:50 height:27 line-height:27 text-align:}&　　　　　　　　input{width:200 height:25 border:1px # border-top:1px #d1d1d1 outline:}&　　　　　　　　input:hover{background:#eff7}&　　　　　　　　input:active{background:#}&　　　　　　　　input:focus{background:#f2}&&&&&&&& &/style&&&&& &/head&&&&& &&& &body&&&&& 　　&ul&&&&&&&&&&&&& 　&li&&&&&&&&&&&&& 　　　&label for=&userName&&姓名:&/label&&&&&&&&&&&&&&&&& 　　&input id=&userName& type=&text&/&&&&&&&&&&&&& 　&/li&&&&&&&&&&&&& 　&li&&&&&&&&&&&&& 　　　&label for=&userPwd&&密码:&/label&&&&&&&&&&&&&&&&& 　　&input id=&userPwd& type=&password&/&&&&&&&&&&&&& 　&/li&&&&&&&&& 　&/ul&&&&& &/body&&&/html&
转载请注明:破洛洛(谢谢合作)
上一篇文章： 下一篇文章：
网友评论：
[][][][][][][][][][]2012年4月 Web 开发大版内专家分月排行榜第二2012年3月 Web 开发大版内专家分月排行榜第二
2012年6月 Web 开发大版内专家分月排行榜第三2012年5月 Web 开发大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。coloryellow
backgroundblue
font-sizesmall
coloryellow
backgroundblue
font-sizelarge
backgroundlime
font-sizesmall
CSS :hover 伪类示例 -- 可以尝试编辑
IE浏览器不支持A元素以外的其它元素的:hover伪类
IE6、IE7(Q)、IE8(Q)浏览器不支持A元素以外的其它元素的:hover伪类，可通过上面的示例测试
伪类选择符的顺序：L-V-H-A
CSS提供了四种伪类设置链接的颜色，包括:link、:visited、:hover、:active，它们的声明是有一定顺序的，我们将这种顺序简称为L-V-H-A，即link最先，其次visited，之后hover，最后active，如此声明才能保证hover与active状态显示正确的样式
color green
color blue
color black
浏览器兼容性
CSS E:hover 伪类浏览器兼容性
16.3 CSS :hover 伪类
教程中有什么不懂的地方？发现教程的错误！对教程有什么建议！快快联系猴子呀，:)为何css样式中的hover在JSP中不起作用 - Java Web开发当前位置:& &&&为何css样式中的hover在JSP中不起作用为何css样式中的hover在JSP中不起作用&&网友分享于：&&浏览：120次为什么css样式中的hover在JSP中不起作用
@charset&"gbk";
*&{&margin:0;&padding:0;&}
li&{&list-style:&}
a&{&color:#FF0000;&text-decoration:&}
#menu_1&{&width:90%;&margin:50px&&text-align:&}
.menu_1&li{&float:&position:&background-color:#00FF00;&height:35width:100&
line-height:35&font-size:15&}
.menu_1&li.hover{&background-color:#4D1EE5;&}
#menu_1&li&ul&{&display:}
#menu_1&li&ul&li&{&float:width:100}
.menu_2,&.menu_3,&.menu_4,&.menu_5,&.menu_6&{&position:&}
.menu_2&{&top:35&left:0&}
.menu_3&{&top:0&left:100&}
.menu_4&{&top:0&left:100&}
.menu_5&{&top:0&left:100&}
.menu_6&{&top:0&left:100&}
------解决方案--------------------.menu_1&li.hover{&background-color:#4D1EE5;&
hover&后面没有点的&
伪类后面直接加一个空格------解决方案--------------------li.hover选择所有拥有class&hover的li
li:hover选择所有hover状态的li，在ie老版本里面不合法
要分清楚，第一种写法一般需要js配合在mouseover的时候加入hover这个class，但是在所有浏览器成立
第二种写法不需要js配合，但是ie会有问题&
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有

我要回帖

更多关于 开封求实高中收费情况 的文章

 

随机推荐