导航栏菜单实现鼠标移入移出中英文切换的两种方法（css3和jQuery）

上代码前先说一下一个需要注意的点

我们在重构页面的时候经常会使用到一个大容器里面包含多个浮动小容器的布局，但是如果外面这个大容器的没有设置固定的高度值，那么大容器高度不会随着里面小容器高度变化而变化，产生内容溢出的现象，这时只需要清除浮动就会恢复正常。所以只要给外面大容器加上overflow:auto的属性，可以解决IE7和火狐浏览器下的清除浮动问题，（但是IE6下不生效）

实现法一：

HTML代码：

<div id="wrap"><ul id="list"><li><a href="#">首页<span>Home</span></a></li><li><a href="#">博客<span>Blog</span></a></li><li><a href="#">学院<span>institute</span></a></li><li><a href="#">下载<span>Download</span></a></li></ul>
</div>

CSS代码

    <style>ul,li,p{padding:0; margin:0;}li{list-style:none;}a{text-decoration: none;color:#fff;  }#wrap{width:502px;margin:0 auto;}#list{width:500px;  border:1px solid #f10215; overflow:auto;}#list li{float:left;height:20px;line-height:20px; width:120px;text-align:center; margin-left:4px; background:#e34434;overflow:hidden}#list li a,span{display:block;  }#list li a:hover{margin-top:-20px; background:#FF3399;  }</style>

注意：#list{overflow:auto}如果不加这句代码，因为没有为其设置高度，设置边框后会看到有高度塌陷的问题

实现法二

HTML代码

<div id="wrap"><ul id="lis"><li class="nav"><p class="cha"><a href="javascript:;">首页</a></p><p class="eng"><a href="javascript:;">Home</a></p></li><li class="nav"><p class="cha"><a href="javascript:;">博客</a></p><p class="eng"><a href="javascript:;">Blog</a></p></li><li class="nav"><p class="cha"><a href="javascript:;">学院</a></p><p  class="eng" ><a href="javascript:;">institute</a></p></li><li class="nav"><p class="cha"><a href="javascript:;">下载</a></p><p class="eng"><a href="javascript:;">Download</a></p></li></ul>
</div>

CSS代码

    <style>ul,li,p{padding:0; margin:0;}li{list-style:none;}a{text-decoration: none;color:#fff;  }#wrap{width:502px;margin:0 auto;}#lis{width:500px;  border:1px solid #f10215; overflow:auto;}#lis li{float:left;height:20px;line-height:20px; width:120px;text-align:center; margin-left:4px; background:#e34434;}#lis{margin-top:20px;}#lis li .eng{display:none;}</style>

注意：#lis{overflow:auto}如果不加这句代码，因为没有为其设置高度，设置边框后会看到有高度塌陷的问题

jQuery代码

    $(function(){$('#lis').find('li').on({'mouseover':function(){$(this).find('.cha').hide();$(this).find('.eng').show().css('background',"#FF3399");},'mouseout':function(){$(this).find('.cha').show();$(this).find('.eng').hide();}})})

看完是不是觉得好简单呀，我也这么认为的，嗯，就当练手了。当然实现方法有很多很多，上面的两种方法仅供参考

导航栏菜单实现鼠标移入移出中英文切换的两种方法（css3和jQuery）相关推荐

jq鼠标移入移出显示和隐藏_jQuery实现鼠标移入移出事件切换功能示例
这篇文章主要介绍了jQuery实现鼠标移入移出事件切换功能,结合实例形式分析了jQuery不同版本处理鼠标事件响应与触发相关操作技巧,需要的朋友可以参考下. jQuery实现鼠标移入移出事件切换功能 ...
JS区分中英文字符的两种方法
JS区分中英文字符的两种方法: 正则和charCodeAt()方法. 正则无疑是最强大的判断各种条件的方法, 最近也在研习它, 虽然枯燥, 但仍有乐趣. 用它来判断一个双字节的中文字符也是轻而易举地. ...
区分中英文字符的两种方法: 正则和charCodeAt()方法
最近在为项目写登录注册系列页面, 表单验证无疑是不可缺少的部分, 在这个jQ插件满天飞的web年代, 表单验证倒也不是难事. 但再好的插件, 也并不能做到十全十美, 比如这次用到的我先前介绍过的Van ...
selenium 鼠标悬浮_selenium鼠标悬浮到元素上的两种方法
第一种悬停方法: action.clickAndHold();// 鼠标悬停在当前位置,既点击并且不释放 action.clickAndHold(onElement);// 鼠标悬停在 onEleme ...
axure 鼠标变成手,Axure教程｜鼠标移入移出自动显示与隐藏三级菜单
前几天因工作需要做一个鼠标移入显示隐藏菜单,鼠标移出自动隐藏菜单, 做的时候觉得没有什么问题,做完后预览就发现一个很严重的问题,就是鼠标移出一级菜单向二级菜单时二级菜单不显示,或者二级菜单显示三级菜单 ...
HTML+CSS 简单的顶部导航栏菜单制作
导航栏的制作: 技术要求: CSS HTML各类标签实现目的: 制作导航栏菜单代码分析: 基本样式清除无序列原点删除下划线删除文字默认居中 a标签设置块级元素伪类选择器对a状态修饰分步实 ...
HTML+CSS 完成顶部导航栏菜单制作
导航栏针对一切网址都很重要,文中关键详细介绍了HTML+CSS 完成顶端导航栏菜单制作,具备一定的参考价值,感兴趣的小伙伴们能够参照一下导航栏的制作: 技术要求: CSS HTML各类标签实现目的 ...
php鼠标已入移除,angularjs鼠标移入移出实现显示隐藏
操作主要是ng-mouseenter和ng-mouseleave配合使用,同时注意$parent实现动态拼接变量截图如下: CSS笔记 - fgm练习 - 鼠标移入移出div显示隐藏 CSS样式部 ...
[转] 鼠标移入/移出颜色渐变
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
jQuery鼠标移入移出(冒泡版和无冒泡版)
带冒泡事件的鼠标移入移出(默认的):mouseover和mouseout事件没有冒泡事件的鼠标移入移出:mouseenter和mouseleave事件转载于:https://www.cnblogs ...

导航栏菜单实现鼠标移入移出中英文切换的两种方法（css3和jQuery）

导航栏菜单实现鼠标移入移出中英文切换的两种方法（css3和jQuery）相关推荐

最新文章

热门文章