div加上hover之后效果没出来

<!DOCTYPE html>

<html>

<head>

<title>城市医院挂号平台</title>

</head>

<body>

<p class="welcome">欢迎来到城市医院预约挂号统一平台 请 

</p>

</div>

</div>

</div>

<div class="link menu">全部科室

内科

</div>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

</div>

内科常见疾病

</div>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

</div>

a疾病

</div>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

</div>

b疾病

</div>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

</div>

c疾病

</div>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

</div>

d疾病

</div>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

<a href="#">心脑血管科</a>

</div>

<a class="link" href="hospital.html">按医院挂号</a>

<a class="link" href="#">按科室挂号</a>

<a class="link" href="#">按疾病挂号</a>

<a class="link right" href="#">社会知名医院</a>

</div>

</div>

</div>

</div>

</select></div>

</div>

</div>

</div>

</div>

</div>

<div class="item-name">北京协和医院<span class="item-level">三甲医院]</span></div>

<div class="item-address">地址：北京市东城区东交民巷1号(西区)；北京市东城区崇文门内大街8号(东区)</div>

</div>

<div class="item-name">北京协和医院<span class="item-level">[三甲医院]</span></div>

<div class="item-address">地址：北京市东城区东交民巷1号(西区)；北京市东城区崇文门内大街8号(东区)</div>

</div>

<div class="item-name">北京协和医院<span class="item-level">[三甲医院]</span></div>

<div class="item-address">地址：北京市东城区东交民巷1号(西区)；北京市东城区崇文门内大街8号(东区)</div>

</div>

<div class="item-name">北京协和医院<span class="item-level">[三甲医院]</span></div>

<div class="item-address">地址：北京市东城区东交民巷1号(西区)；北京市东城区崇文门内大街8号(东区)</div>

</div>

<a href="#" class="item">首都儿科研究所附属儿童医院<span class="level">[三甲医院]</span></a>

</div>

</div>

其它城区内容

</div>

</div>

<a href="#" class="link">阜外医院特需门诊暂停更新号源通...</a>

<a href="#" class="link">防护策略升级通知</a>

<a href="#" class="link">阜外医院特需门诊暂停更新号源通...</a>

<a href="#" class="link">防护策略升级通知</a>

<a href="#" class="link">阜外医院特需门诊暂停更新号源通...</a>

<a href="#" class="link">防护策略升级通知</a>

</div>

<a href="#" class="link">首都医科大学附属北京安贞医院消...</a>

<a href="#" class="link">首都医科大学附属北京安贞医院妇</a>

<a href="#" class="link">阜外医院特需门诊暂停更新号源通...</a>

<a href="#" class="link">防护策略升级通知</a>

<a href="#" class="link">首都医科大学附属北京安贞医院消...</a>

<a href="#" class="link">首都医科大学附属北京安贞医院妇</a>

</div>

</div>

</body>

</html>

ui.css

/*搜索*/

.ui-search{

background: url(../img/ui-search.jpg) center no-repeat;

font-size: 14px;

color: #fff;

position: relative;

}

.ui-search-selected{

width: 70px;

height: 38px;

line-height: 38px;

position: absolute;

left: 0;

top: 0;

text-indent: 14px;

}

.ui-search-select-list{

display: none;

position: absolute;

width: 67px;

line-height: 24px;

background-color: #fff;

left: 2px;

top: 36px;

z-index: 2;

box-shadow: 3px 3px 5px rgba(0,0,0,.2);

}

.ui-search-select-list a{

display: block;

color: #A5a2a2;

text-align: center;

}

.ui-search-select-list a:hover{

background-color: #ebeef5;

}

.ui-search-input{

width: 208px;

height: 26px;

line-height: 26px;

position: absolute;

top: 5px;

left: 73px;

font-size: 13px;

color: #A5A2A2;

}

.ui-search-submit{

display: block;

position: absolute;

top: 1px;

right: 0;

width: 40px;

height: 36px;

}

/*ui-menu 分类菜单*/

.ui-menu-item{

height: 22px;

line-height: 22px;

padding: 8px 5px 9px 6px;

margin-left: 2px;

}

.ui-menu-item:hover{

background-color: #fff;

}

.ui-menu-item-department{

float: left;

height: 22px;

line-height: 22px;

padding-left: 30px;

font-size: 14px;

color: #fff;

position: relative;

}

.ui-menu-item-department:before{

content: ' ';

display: block;

width: 22px;

height: 21px;

position: absolute;

top: 1px;

left: 0;

background: url(../img/icon-menu.jpg) -22px 0 no-repeat;

}

.ui-menu-item:nth-child(2) .ui-menu-item-department:before{

background-position-y: -22px;

}

.ui-menu-item:nth-child(3) .ui-menu-item-department:before{

background-position-y: -44px;

}

.ui-menu-item:nth-child(4) .ui-menu-item-department:before{

background-position-y: -66px;

}

.ui-menu-item:hover .ui-menu-item-department:before{

background-position-x: 0;

}

.ui-menu-item-disease{

float: right;

font-size: 12px;

padding-left: 5px;

color: #d7f3ff;

}

.ui-menu-item:hover .ui-menu-item-department{

color: #333;

}

.ui-menu-item:hover .ui-menu-item-disease{

color: #868686;

}

.ui-menu-item:hover .ui-menu-item-detail{

display: block;

background-color: red;

}

.ui-menu-item-detail{

display: block;

position: absolute;

width: 500px;

height: 393px;

padding: 20px 10px 10px 29px;

background: #fff url(../img/bg-menu.jpg) center no-repeat;

top: 0;

left: 190px;

box-shadow: 5px 5px 2px rgba(0,0,0,.1);

}

.ui-menu-item-detail-group{

padding-bottom: 20px;

text-align: left;

}

.ui-menu-item-detail-group-caption{

width: 100px;

height: 34px;

line-height: 34px;

color: #666;

display: block;

font-size: 16px;

font-weight: bold;

}

.ui-menu-item-detail-group-list{

line-height: 23px;

}

.ui-menu-item-detail-group-list a{

display: inline-block;

color: #868686;

margin-right: 8px;

font-size: 12px;

padding-bottom: 5px;

}

.ui-menu-item-detail-group-list a:after{

content: '|';

color: #eee;

margin-left: 8px;

}

/*回到顶部*/

.ui-backTop{

position: fixed;

right: 2px;

bottom: 2px;

z-index: 9;

display: none;

width: 40px;

height: 40px;

color: #fff;

background: rgba(102,102,102,.9) url(../img/icon-go-up.png) center no-repeat;

}

.ui-backTop:hover{

background: rgba(102,102,102,.9);

}

.ui-backTop:hover:after{

content: '回到顶部';

display: block;

line-height: 20px;

text-align: center;

}

/*ui-slider幻灯片组件*/

.ui-slider{

width: 544px;

height: 414px;

position: relative;

overflow: hidden;

}

.ui-slider-wrap{

width: 99999px;

height: 414px;

position: absolute;

left: 0;

right: 0;

transition: all .5s;

}

.ui-slider-wrap .item{

display: block;

width: 544px;

height: 414px;

float: left;

}

.ui-slider-arrow{

width: 544px;

height: 40px;

position: absolute;

top: 50%;

margin-top: -20px;

}

.ui-slider-arrow .item{

display: block;

width: 40px;

height: 40px;

position: absolute;

top: 0;

background: url(../img/ui-slider-arrow.png) no-repeat;

}

.ui-slider-arrow .left{

left: 0;

}

.ui-slider-arrow .right{

right: 0;

background-position: -40px 0;

}

.ui-slider-process{

width: 544px;

height: 12px;

text-align: center;

position: absolute;

left: 0;

bottom: 20px;

}

.ui-slider-process .item{

display: inline-block;

width: 16px;

height: 16px;

background: url(../img/ui-slider-process.png) no-repeat;

}

.ui-slider-process .item_focus,

.ui-slider-process .item:hover{

background-position: -23px 0;

}

layout.css

body{

margin: 0;

padding: 0;

}

.clearfix:after{

content: ' ';

display: block;

height: 0;

line-height: 0;

clear: both;

zoom: 1;

}

.wrap{

width: 1000px;

margin: 0 auto;

position: relative;

}

.top{

height: 30px;

background-color: #f5f5f5;

}

.header{

height: 92px;

}

.nav{

height: 36px;

background-color: #60bff2;

}

.banner{

width: 802px;

margin: 0 auto;

height: 414px;

padding: 9px 0 0 198px;

}

.banner-slider{

float: left;

width: 544px;

height: 414px;

background-color: #8edff3;

}

.banner-search{

float: right;

width: 250px;

height: 255px;

background-color: #eee;

}

.banner-help{

float: right;

width: 250px;

height: 146px;

background-color: #ccc;

margin-top: 12px;

}

.content{

padding: 10px 0 38px 0;

}

.content-tab{

float: left;

width: 742px;

height: 490px;

background-color: #eee;

}

.content-news,

.content-close{

float: right;

width: 248px;

height: 236px;

border: 1px solid #ccc;

}

.content-close{

margin-top: 12px;

border-color: red;

}

.footer{

height: 70px;

padding: 25px 0;

background-color: #eceef2;

}

base.css

margin: 0;

padding: 0;

display: inline-block;

}

text-decoration: none;

}

select,input{

border: none;

outline: none;

}

/*top*/

.top{

line-height: 30px;

font-size: 13px;

color: #868686;

}

.top .call{

float: left;

padding-left: 20px;

background: url(../img/icon-call.png) no-repeat left center;

}

.top .welcome{

float: right;

}

.top a{

color: #2da5e1;

padding-left: 10px;

}

/*header*/

.header .logo{

width: 402px;

height: 74px;

padding: 9px 0;

display: inline-block;

}

.header .logo img{

width: 100%;

height: 100%;

}

.header .search{

width: 326px;

height: 38px;

position: absolute;

right: 0;

top: 29px;

/*background-color: orange;*/

}

/*nav*/

.nav .link{

display: inline-block;

float: left;

padding-left: 30px;

line-height: 36px;

color: #fff;

font-size: 16px;

min-width: 80px;

text-align: center;

}

.nav a:hover{

color: #d7f3ff;

}

.nav .menu{

width: 130px;

padding-right: 30px;

background-color: #1fa4f0;

position: relative;

}

.nav .menu .menu-list{

background-color: #1fa4f0;

position: absolute;

width: 100%;

height: 423px;

left: 0;

top: 36px;

}

.nav .right{

/*float: right;*/

}

/*banner*/

.banner-search{

background-color: #fafafa;

}

.banner-help .caption,

.banner-search .caption{

height: 22px;

padding: 15px 0;

text-align: center;

}

.banner-help .caption .text,

.banner-search .caption .text{

display: inline-block;

height: 22px;

line-height: 22px;

padding-left: 28px;

color: #fec009;

font-size: 16px;

background: url(../img/icon-help.png) no-repeat 0 0;

}

.banner-search .form{

height: 150px;

}

.banner-search .form .line{

padding-bottom: 9px;

text-align: center;

}

.banner-search .form .line select{

width: 170px;

font-size: 12px;

z-index: 0;

border: 1px solid #dcdddd;

height: 26px;

line-height: 26px;

padding: 2px 0;

color: #666;

}

.banner-search .submit{

height: 32px;

text-align: center;

}

.banner-search .submit .button{

width: 108px;

height: 33px;background-color: #fecd09;

font-size: 14px;

color: #fff;

border-radius: 3px;

}

.banner-help{

background-color: #fafafa;

}

.banner-help .caption .text{

color: #00b3ea;

background-position: 0 -23px;

}

.banner-help .link{

color: #00b3ea;

display: inline-block;

width: 86px;

height: 26px;

line-height: 26px;

font-size: 14px;

text-align: center;

padding: 0 0 8px 26px;

}

/*content*/

.content-news{

background-color: #fff;

border: 1px solid #f4f6fa;

}

.content-close .caption,

.content-news .caption{

height: 38px;

line-height: 38px;

background-color: #f4f6fa;

text-indent: 20px;

color: #fec009;

font-size: 15px;

}

.content-news .more,

.content-close .more{

float: right;

padding-right: 22px;

font-size: 12px;

color: #868686;

}

.content-news .list,

.content-close .list{

padding: 15px 20px 13px 35px;

line-height: 29px;

font-size: 12px;

background: url(../img/list-yellow.jpg) 17px 20px no-repeat;

}

.content-news .list .link,

.content-close .list .link{

display: block;

color: #969696;

}

.content-close{

background-color: #fff;

border: 1px solid #f4f6fa;

}

.content-close .caption{

color: #4ab4ed;

}

.content-close .list{

background-image: url(../img/list-blue.jpg);

}

/*content-tab*/

.content-tab{

background: none;

}

.content-tab .caption{

height: 34px;

line-height: 34px;

background-color: #f5f6fa;

}

.content-tab .caption .item{

display: block;

width: 112px;

height: 34px;

text-align: center;

float: left;

color: #00b3ea;

}

.content-tab .caption .item_focus{

color: #fff;

background-color: #60bff2;

}

.content-tab .content-block{

height: 452px;

border: 1px solid #f4f6fa;

}

.content-tab .detail-caption{

height: 26px;

line-height: 26px;

padding: 8px;

border-bottom: 1px solid #f4f6fa;

}

.content-tab .detail-item{

display: block;

padding: 0 10px;

font-size: 12px;

color: #4c4948;

float: left;

}

.content-tab .detail-item_focus{

color: #fff;

background-color: #60bff2;

}

.content-tab .detail-content{

padding: 16px 12px;

}

.content-tab .detail-content .detail-more{

display: block;

line-height: 55px;

text-align: center;

color: #5084c4;

font-size: 14px;

}

.content-tab .detail-content .detail-list > .item{

float: left;

width: 216px;

height: 102px;

padding: 0 20px 10px 120px;

position: relative;

font-size: 12px;

}

.content-tab .detail-content .detail-list .item img{

width: 110px;

height: 98px;

position: absolute;

top: 0;

left: 0;

}

.content-tab .detail-content .item .item-name{

color: #036eb7;

font-size: 14px;

line-height: 21px;

padding-top: 13px;

}

.content-tab .detail-content .item .item-level{

float: right;

font-size: 12px;

color: #979797;

}

.content-tab .detail-content .item .item-iphone,

.content-tab .detail-content .item .item-address{

line-height: 18px;

padding-bottom: 4px;

color: #666;

}

.content-tab .detail-content .detail-text-list .item{

display: block;

width: 351px;

height: 27px;

font-size: 14px;

color: #666;

padding-top: 8px;

float: left;

border-bottom: 1px dashed #dcdddd;

}

.content-tab .detail-content .detail-text-list .item:nth-child(2n){

margin-left: 13px;

}

.footer{

line-height: 70px;

text-align: center;

font-size: 12px;

color: #666;

}

ui.js

//ui-search定义

$.fn.UiSearch = function(){

var ui = $(this);

$('.ui-search-selected',ui).on('click',function(){

$('.ui-search-select-list').show();

return false;

})

$('.ui-search-select-list a',ui).on('click',function(){

$('.ui-search-selected').text($(this).text());

$('.ui-search-select-list').hide();

return false;

})

$('body').on('click',function(){

$('.ui-search-select-list').hide();

})

}

//ui-tab

$.fn.UiTab = function(header,content,focus_prefix){

var ui = $(this);

var tabs = $(header,ui);

var cons = $(content,ui);

var focus_prefix = focus_prefix || '';

tabs.on('click',function(){

var index = $(this).index();

tabs.removeClass(focus_prefix + 'item_focus').eq(index).addClass(focus_prefix +'item_focus');

cons.hide().eq(index).show();

return false;

})

}

//ui-backTop

$.fn.UiBackTop = function(){

var ui = $(this);

var el = $('<a class="ui-backTop" href="#"></a>');

ui.append(el);

var windowHeight = $(window).height();

$(window).on('scroll',function(){

var top = $('html,body').scrollTop();

if(top > windowHeight / 2){

el.show();

}else{

el.hide();

}

});

el.on('click',function(){

$(window).scrollTop(0);

})

}

//ui-slider

$.fn.UiSlider = function(){

var ui = $(this);

var wrap = $('.ui-slider-wrap');

var btn_prev = $('.ui-slider-arrow .left',ui);

var btn_next = $('.ui-slider-arrow .right',ui);

var items = $('.ui-slider-wrap .item',ui);

var tips = $('.ui-slider-process .item',ui);

//预定义

var current = 0;

var length = items.length;

var width = items.eq(0).width();

var enableAuto = true;

//设置自动滚动感应

ui.on('mouseover',function(){

enableAuto = false;

})

.on('mouseout',function(){

enableAuto = true;

})

//具体操作,自定义事件

wrap.on('move_prev',function(){

if(current<=0){

current = 3;

}

current = current - 1;

wrap.triggerHandler('move_to',current);

}).on('move_next',function(){

if(current>=length-1){

current = -1;

}

current = current + 1;

wrap.triggerHandler('move_to',current);

}).on('move_to',function(event,index){

wrap.css('left',- index * width);

tips.removeClass('item_focus').eq(index).addClass('item_focus');

}).on('auto_move',function(){

setInterval(function(){

enableAuto && wrap.triggerHandler('move_next');

},2000)

}).triggerHandler('auto_move');

//事件定义

btn_prev.on('click',function(){

wrap.triggerHandler('move_prev');

});

btn_next.on('click',function(){

wrap.triggerHandler('move_next');

});

tips.on('click',function(){

var index = $(this).index();

wrap.triggerHandler('move_to',index);

});

}

//ui-cascading

$.fn.UiCascading = function(){

var ui = $(this);

var selects = $('select',ui);

selects.on('change',function(){

var val = $(this).val();

var index = selects.index(this);

//触发下一个select的更新，根据当前的值

var where = $(this).attr('data-where');

where = where ? where.split(',') : [];

where.push($(this).val());

selects.eq(index+1).attr('data-where',where.join(','))

.triggerHandler('reloadOptions');

//触发下一个之后的select的初始化（清楚不应该的数据项）

ui.find('select:gt('+(index+1)+')').each(function(){

$(this).attr('data-where','')

.triggerHandler('reloadOptions');

})

}).on('reloadOptions',function(){

var method = $(this).attr('data-search');

var args = $(this).attr('data-where').split(',');

var data = AjaxRemoteGetData[method].apply(this,args);

var select = $(this);

select.find('option').remove();

$.each(data,function(i,item){

var el = $('<option value="'+item+'">'+item+'</option>');

select.append(el);

});

selects.eq(0).triggerHandler('reloadOptions');

}

//页面的脚本逻辑

$(function(){

$('.ui-search').UiSearch();

$('.content-tab').UiTab('.caption > .item','.content-block > .item');

$('.content-tab .content-block .item').UiTab('.detail-caption > a','.detail-content > .block-wrap','detail-');

$('body').UiBackTop();

$('.ui-slider').UiSlider();

$('.ui-cascading').UiCascading();

})

慕盖茨9092533 2019-06-19

源自：实战：挂号平台首页 5-3 首页.UI组件-UiMenu

收起

3回答

好帮手慕星星 2019-06-20 14:01:35

你好，选项卡上没有点击效果，移入三个选项卡没有问题：

不知道同学说的是点击哪里，建议描述清楚一下，便于准确定位问题所在。如果自己测试出来不是这种效果，可以将自己修改后的代码粘贴上来，老师这边再测试下。

祝学习愉快！

收起回答

提问者慕盖茨9092533 #1

之前跟着老师敲得代码是有效果的,后来就没有了.老师你是粘的我的代码吗?我就按着你说的改的,回复的时候代码有限制,粘着太麻烦了

2019-06-21 12:51:37
好帮手慕慕子回复提问者慕盖茨9092533 #2

同学你好，老师测试得是你粘贴的源码，按着“醒醒”老师说的方式，增加层级是可以点击左侧导航是可以正常显示子菜单的，建议：同学可以清除浏览器缓存再测一下哦

2019-06-21 20:07:36

好帮手慕星星 2019-06-19 17:13:39

你好，可以看到子菜单是显示出来的：

有红色部分，只不过被轮播遮盖住了，可以添加显示层级，如下：

自己修改测试下，祝学习愉快！

收起回答

提问者慕盖茨9092533 #1

老师,你加上去之后点击看一下，加上z-index之后还是没效果

2019-06-20 10:49:10

好帮手慕星星 2019-06-19 16:28:58

你好，同学具体指的是哪里加上hover之后没有效果呢，建议详细描述一下，便于准确定位问题所在，帮助你解决。

祝学习愉快！

收起回答

提问者慕盖茨9092533 #1

全部科室下面，.ui-menu-item加hover之后，.ui-menu-item-detail显示效果没有出现，之前是有效果的，后来写到hosipital页面之后，点击效果没了，想知道是哪里的问题，还有在代码多的情况下，如何快速找到问题并解决

2019-06-19 16:48:17