在CSS中如何设置一个按钮鼠标划过变颜色。

html-css017

在CSS中如何设置一个按钮鼠标划过变颜色。,第1张

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：button {background-color: #00a7d0}

button:hover {background-color: #ff7701}。

3、浏览器运行index.html页面，此时显示出了蓝色背景颜色的按钮。

4、将鼠标移入按钮，此时按钮的背景颜色变成了橙色。

鼠标滑过导航栏下拉三级菜单，使用到的功能包括：hover效果、追加元素、显示、隐藏、上拉、下拉等等；记得引入jQuery插件！记得引入jQuery插件！记得引入jQuery插件！

布局：

<div id="content">

<ul class="ul_one">

<li class="all">全部团购分页</li>

<li>首页

<ol class="ul_two">

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

</ol>

</li>

<li>餐饮美食

<ol>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

</ol>

</li>

<li>休闲娱乐

<ol>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

</ol>

</li>

<li>旅游住宿

<ol>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

</ol>

</li>

<li>生活服务

<ol>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

</ol>

</li>

<li>丽人

<ol>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

</ol>

</li>

<li>商品

<ol>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

</ol>

</li>

</ul>

</div>

样式：

body,ul,ol,li{margin: 0padding: 0list-style: none}

#content{background: #A12201}

.ul_one{width: 80%margin:auto}

.ul_one:after{content: ''display: blockclear: both}

.ul_one>li{float: leftheight:40pxline-height:40pxtext-align:centerwidth:100pxcolor: #ffffont-weight: boldborder-right: 1px solid #931900}

.ul_one>li:hover{background: #6C1500}

ol{background:#6C1500width: 100pxdisplay: noneborder: 1px solid #6C1500}

ol>li{position: relative}

.all{background:#D03322padding: 0 40px}

.all_one{padding: 0 10px}

.con_t{color: #666position: absoluteleft: 100pxtop:0border:2px solid #6C1500width: 200px}

.con_t li{background: #D03322border-bottom: 1px dashed #000}

js逻辑：

复合事件

$('ul>li').hover(function(){

//移入当前元素的子元素下拉

$(this).children().stop().slideDown()

},function(){

//移出当前元素的子元素上拉

$(this).children().stop().slideUp()

})

$('ol>li').hover(function(){

//移入当前元素的子元素显示

$(this).children().stop().show()

//当前元素修改背景颜色、字体颜色

$(this).css({'background':'#fff','color':'#000'})

//创建元素

var $div=$('<ul class="con_t"><li>三级菜单</li><li>三级菜单</li><li>三级菜单</li><li>三级菜单</li></ul>')

$div.appendTo($(this))

},function(){

//移出当前元素的子元素隐藏

$(this).children().stop().hide()

//背景颜色、字体颜色为空

$(this).css({'background':'','color':''})

//删除class名

$(this).children('.cont_t').remove()

})