鼠标滑过标签背景颜色改变,各位大哥,可否告诉我该怎么做?如何用css实现鼠标滑过时出现一个下拉列表
鼠标滑过div让另外一个div从隐藏变为显示1、给鼠标经过的DIV添加一个类,可否告诉我该怎么做给这个a标签一个class:class=“a-hover”在css里面添加.a-hover的样式.a-hover{ &:hover{ background-color:#1ec2d5; }}如何用css实现鼠标滑过时出现一个下拉列表使用hover这个属性,《script src=“jQuery 鼠标滑过执行一个函数,如下图:2、给显示或者隐藏的DIV,添加一个ID,用于控制鼠标经过显示DIV,当鼠标在某元素上多次快速的滑过,离开隐藏DIV。
鼠标滑过标签背景颜色改变,各位大哥,可否告诉我该怎么做
给这个a标签一个class:class=“a-hover”
在css里面添加.a-hover的样式
.a-hover{ &:hover{ background-color:#1ec2d5; }}如何用css实现鼠标滑过时出现一个下拉列表
使用hover这个属性,hover就是鼠标经过,先给需要出现的下拉表给个display:none,这样下拉表就看不见了,用上hover以后再在里面给display:block;他就出现了。
鼠标滑过div让另外一个div从隐藏变为显示
1、给鼠标经过的DIV添加一个类 ,类名为submeau;如下图:
2、给显示或者隐藏的DIV,添加一个ID,ID名为:id=“oa_submeau“,如下图:
3、将以下的JQUERY代码放在整个网页的最底部,用于控制鼠标经过显示DIV,离开隐藏DIV。
《script src=“
jQuery 鼠标滑过执行一个函数,当鼠标在某元素上多次快速的滑过,鼠标离开,函数仍在执行
添加stop()方法即可解决看我中午写的例子:《!DOCTYPE HTML》《html》《head》《title》已测试,都可以显示《/title》《meta charset=UTF-8 /》《style type=“text/css“》.menu { position: relative; width: 100%; height: 50px; background: #efefef; z-index: 999;} .menu .nav { position: relative; width: 100%; height: 50px; /* left:50%; margin-left:-500px; */} .menu .nav li { float: left; font-size: 18px; width: 140px;} .menu .nav li a { float: left; display: block; height: 50px; padding: 0 30px; line-height: 50px; color: #333; text-decoration: none; position: relative; overflow: hidden; transition: 0.5s ease; -webkit-transition: 0.5s ease;} .menu .nav li a:hover,.menu .nav li a.current { background: #8ecb8d; color: #fff;} .menu .nav li .box { width: 100%; height: 35px; position: absolute; top: 50px; /* left: 203px; *left: 198px; left: 198px\0; */ background-color: rgba(0, 0, 0, 0.4) !important; background-color:rgb(0,0,0); filter: Alpha(opacity = 40); display: none; font-size: 16px; z-index: 999;} .menu .nav li .box a { display: block; height: 35px; color: #fff; line-height: 35px; border: none; background: none; padding: 0; width: 114px; text-align: center;} .menu .nav li .box a:hover { text-decoration: underline; color: #8ecb8d;} ul { list-style: none;}《/style》《script type=“text/javascript“ src=“jquery-1.8.0.min.js“》《/script》《script type=“text/javascript“》 jQuery (function ($) { $ (“.menu .nav li“).hover (function () { $(this).find (“a“).addClass (“current“).end().find (“.box“).stop().slideDown (140); },function () { $(this).find (“a“).removeClass (“current“).end().find (“.box“).stop().slideUp (140); }); })《/script》《/head》《body》 《div class=“menu“》 《ul class=“nav“》 《li》《a href=“#“》网站首页《/a》《/li》 《li》《a href=“#“》概况介绍《/a》 《div class=“box“》 《a href=“#“》院系简介《/a》 《a href=“#“》机构设置《/a》 《a href=“#“》现任领导《/a》 《/div》《/li》 《li》《a href=“#“》党建工作《/a》 《div class=“box“》 《a href=“#“》支部设置《/a》 《a href=“#“》党员教育《/a》 《a href=“#“》书记信箱《/a》 《a href=“#“》荣誉奖励《/a》 《/div》《/li》 《li》《a href=“#“》教学工作《/a》 《div class=“box“》 《a href=“#“》专业设置《/a》 《a href=“#“》师资队伍《/a》 《a href=“#“》实习基地《/a》 《a href=“#“》教学成果《/a》 《/div》《/li》 《li》《a href=“#“》教学资源《/a》 《div class=“box“》 《a href=“#“》教材专著《/a》 《a href=“#“》重点课程《/a》 《a href=“#“》主干课程《/a》 《/div》《/li》 《li》《a href=“#“》科研工作《/a》 《div class=“box“》 《a href=“#“》科研课题《/a》 《a href=“#“》科研论文《/a》 《a href=“#“》科研条件《/a》 《/div》 《li》《a href=“#“》招生就业《/a》 《div class=“box“》 《a href=“#“》招生情况《/a》 《a href=“#“》就业概况《/a》 《a href=“#“》就业信息《/a》 《/div》 《li》《a href=“#“》联系交流《/a》 《div class=“box“》 《a href=“#“》合作交流《/a》 《a href=“#“》系友通讯《/a》 《a href=“#“》对外服务《/a》 《/div》《/li》 《/ul》 《/div》《/body》《/html》
上一篇:校园兵王小说推荐(校园兵王)
版权声明: 本站仅提供信息存储空间服务,旨在传递更多信息,不拥有所有权,不承担相关法律责任,不代表本网赞同其观点和对其真实性负责。如因作品内容、版权和其它问题需要同本站联系的,一经查实,本站将立刻删除。