当前位置: > 科技>正文

鼠标滑过标签背景颜色改变,各位大哥,可否告诉我该怎么做?如何用css实现鼠标滑过时出现一个下拉列表

2023-03-02 05:01:29 互联网 科技

鼠标滑过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》

鼠标

版权声明: 本站仅提供信息存储空间服务,旨在传递更多信息,不拥有所有权,不承担相关法律责任,不代表本网赞同其观点和对其真实性负责。如因作品内容、版权和其它问题需要同本站联系的,一经查实,本站将立刻删除。