AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

HTML案例—很讨巧的一种js+css制作hover模式展示二级菜单方法

2016-09-28 1106
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 利用css减少js的逻辑使用 body { padding: 0; font-size: 10pt; behavior:url(css/csshover.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用css减少js的逻辑使用</title>
<style type="text/css">
body
{
padding: 0;
font-size: 10pt;
behavior:url(css/csshover.htc);
}
.topmenu
{
display: block;
width: 220px;
border: 2px solid #e4393c;
margin: 0;
padding: 0;
}
.toptitle
{
height: 40px;
line-height: 40px;
text-align: left;
font-size: 11pt;
font-weight: bold;
color: White;
background: #e4393c;
padding-left: 20px;
}
.topmenu li
{
height: 30px;
line-height: 30px;
font-size: 11pt;
list-style-type: none;
text-align: left;
padding-left: 8px;
z-index: 3;
background-image: url(http://img.mukewang.com/5411027300014f0200220030.jpg);
background-repeat: no-repeat;
background-position: right;
}
.topmenu li a
{
text-decoration: none;
color: #313131;
}
.topmenu li a:hover
{
text-decoration: underline;
font-weight: bold;
color: #e4393c;
}
.topmenu .lihover /*鼠标移动到上面时，应用的样式*/
{
border: 1px solid #DDD;
border-right: 0;
box-shadow: 0 0 8px #DDD;
-moz-box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
background-image: none;
height:60px;
border-left:4px solid #e4393c;

/*极其讨巧的一个方法：css里写好样式，只有添加了lihover这个样式，那个lihover span的选择器才会生效。不添加lihover这个类名，.lihover soan/.lihover .div 这些lihover下的style不会生效。*/
}
.topmenu .lihover .submenu /*悬浮层，这种情况下不使用lihover这个类名的话，。submenu也应用不了样式。然后还会是隐藏的样式。*/
{
display: block;
}

.topmenu .lihover span /*白色小方框 没有lihover。span的样式也加不上去，span标签就是一个小圆点，我们也看不到他。*/
{
background: white;
display: inline-block;
z-index: 20;
width: 20px;
height: 60px;
float: right;
position: relative;
}


.topmenu li b
{
display:none;

}

.topmenu .lihover b
{
display:block;
height:30px;
line-height:30px;
font-weight:normal;
font-size:10pt;
}

.submenu
{
display: none;
width: 715px;
left: 220px;
position: absolute;
top: 40px;
border: 1px solid #DDD;
z-index: 4;
background: white;
box-shadow: 0 0 8px #DDD;
-moz-box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
}
.leftdiv
{
float: left;
width: 490px;
margin: 5px;
}
.rightdiv
{
float: left;
width: 200px;
margin: 5px;
}

.leftdiv dl
{
display: block;
border-bottom: 1px solid #EEE;
padding-bottom: 6px;
overflow: hidden;
}
.leftdiv dl dt
{
display: block;
float: left;
width: 60px;
text-align: right;
height: 22px;
line-height: 22px;
padding-right: 6px;
}

.leftdiv dl dt a
{
color: #e4393c;
font-weight: bold;
text-decoration: underline;
font-size: 10pt;
}
.leftdiv dl dd
{
display: block;
overflow: hidden;
}
.leftdiv dl dd a
{
display: block;
float: left;
border-left: 1px solid #CCC;
color: #737373;
font-size: 9pt;
padding: 0 8px;
height: 14px;
line-height: 14px;
margin: 4px 0;
}

.rightdiv dl dd
{
margin: 3px 0;
}

.rightdiv dl dt
{
color: #e4393c;
font-weight: bold;
font-size: 10pt;
}

.rightdiv dl dd a
{
font-size: 9pt;
color: #737373;
line-height: 22px;
}
.rightdiv dl dd a:hover
{
color: #737373;
font-weight: normal;
}

.rightPic
{
position:relative;
right:-35px;
bottom:-30px;

}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var aLi = document.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
aLi[i].i = i;
aLi[i].onmouseover = function(){
this.className = "lihover";
//添加了lihover这个样式，那个lihover span的选择器才会生效。
}
aLi[i].onmouseout = function(){
this.className = "";
}
}








}
</script>
<ul class="topmenu">
<div class="toptitle">
全部商品分类
</div>
<li><a href="#">图书、音像、数字商品</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">电子书</a></dt>
<dd>
<a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a>
<a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a>
</dd>
</dl>
<dl>
<dt><a href="#">数字音乐</a></dt>
<dd>
<a href="#">通俗流行</a> <a href="#">古典音乐</a> <a href="#">摇滚说唱</a> <a href="#">爵士蓝调</a>
<a href="#">乡村民谣</a> <a href="#">有声读物</a>
</dd>
</dl>
<dl>
<dt><a href="#">音像</a></dt>
<dd>
<a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a>
</dd>
</dl>
<dl>
<dt><a href="#">文艺</a></dt>
<dd>
<a href="#">小说</a> <a href="#">文学</a> <a href="#">青春文学</a> <a href="#">传记</a> <a
href="#">艺术</a>
</dd>
</dl>
<dl>
<dt><a href="#">人文社科</a></dt>
<dd>
<a href="#">历史</a> <a href="#">心理学</a> <a href="#">政治/军事</a> <a href="#">国学/古籍</a>
<a href="#">哲学/宗教</a> <a href="#">社会科学</a>
</dd>
</dl>
<dl>
<dt><a href="#">经管励志</a></dt>
<dd>
<a href="#">经济</a> <a href="#">金融与投资</a> <a href="#">管理</a> <a href="#">励志与成功</a>
</dd>
</dl>
<dl class="fore7">
<dt><a href="#">生活</a></dt>
<dd>
<a href="#">家教与育儿</a> <a href="#">旅游/地图</a> <a href="#">烹饪/美食</a> <a href="#">时尚/美妆</a>
<a href="#">家居</a> <a href="#">婚恋与两性</a> <a href="#">娱乐/休闲</a> <a href="#">健身与保健</a>
<a href="#">动漫/幽默</a> <a href="#">体育/运动</a>
</dd>
</dl>
<dl>
<dt><a href="#">科技</a></dt>
<dd>
<a href="#">科普</a> <a href="#">IT</a> <a href="#">建筑</a> <a href="#">医学</a> <a href="#">
工业技术</a> <a href="#">电子/通信</a> <a href="#">农林</a> <a href="#">科学与自然</a>
</dd>
</dl>
<dl>
<dt><a href="#">少儿</a></dt>
<dd>
<a href="#">少儿</a> <a href="#">0-2岁</a> <a href="#">3-6岁</a> <a href="#">7-10岁</a>
<a href="#">11-14岁</a>
</dd>
</dl>
<dl>
<dt><a href="#">教育</a></dt>
<dd>
<a href="#">教材</a> <a href="#">中小学教辅</a> <a href="#">考试</a> <a href="#">外语学习</a>
</dd>
</dl>
<dl>
<dt><a href="#">其它</a></dt>
<dd>
<a href="#">英文原版书</a> <a href="#">港台图书</a> <a href="#">工具书</a> <a href="#">套装书</a>
<a href="#">杂志/期刊</a>
</dd>
</dl>
</div>
<div class="rightdiv">
<dl>
<dd>
<a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html">
<img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg"
width="194" height="70" title="\家电">
</a>
</dd>
<dd>
<a href="http://sale.jd.com/act/v8kJIaPmsMGuebpH.html">
<img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg"
width="194" height="70" title="小家电--三请聚宝盆">
</a>
</dd>
</dl>
<dl>
<dt>推荐品牌</dt>
<dd>
<a href="#">美的官方旗舰店</a>
</dd>
<dd>
<a href="#">苏泊尔旗舰店</a>
</dd>
<dd>
<a href="#">九阳旗舰店</a>
</dd>
<dd>
<a href="#">东菱旗舰店</a>
</dd>
<dd>
<a href="#">海尔统帅旗舰店</a>
</dd>
<dd>
<a href="#">小熊旗舰店</a>
</dd>
</dl>
<img src="wii.png" class="rightPic" />
</div>
</div>
</li>
<li><a href="#">家用电器</a></li>
<li><a href="#">手机、数码</a></li>
<li><a href="#">电脑、办公</a></li>
<li><a href="#">家居、家具、家装、厨具</a></li>
<li><a href="#">服饰内衣、珠宝首饰</a></li>
<li><a href="#">个护化妆</a></li>
<li><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>
<li><a href="#">运动户外</a></li>
<li><a href="#">汽车用品</a></li>
<li><a href="#">母婴、玩具乐器</a></li>
<li><a href="#">食品饮料、酒类、生鲜</a></li>
<li><a href="#">营养保健</a></li>
</ul>
</body>
</html>

来自慕课练习题总结：http://www.imooc.com/code/3608

文章标签：
前端开发
Web App开发
关键词：
JavaScript方法
HTML方法
CSS hover
JavaScript案例
HTML CSS
鋒o丫头
目录
相关文章
卓伊凡
|
4月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
卓伊凡
115 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
卓伊凡
|
5月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
卓伊凡
117 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
疯狂的猿
|
5月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
疯狂的猿
109 34
潜意识Java
|
5月前
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦，共创未来”为主题，采用动态龙元素展现青春活力与创新精神。页面设计简洁明快，色彩协调，突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明：禁止用于商业活动，可用于比赛和作业等开源场景。最后，作者表达了对五四精神的致敬与传承，强调了青春活力和创造力的重要性，并感谢评委和支持者。 **获奖感言摘录：** “获得这个奖项，对我们团队来说，既是认可也是激励。我们将继续努力，不断优化产品，为用户带来更好的体验，为社会贡献更多价值。”
潜意识Java
107 2
沉默术士
|
测试技术 JavaScript 前端开发
LoadRunner中HTML模式与URL模式的区别
沉默术士
1602 0
二二*一一
|
7月前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
313 1
卓伊凡
|
5月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
卓伊凡
216 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
疯狂的猿
|
5月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
疯狂的猿
172 33
疯狂的猿
|
6月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
疯狂的猿
165 24
东方睿赢
|
7月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现，强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
东方睿赢
273 7

热门文章

最新文章

  • 1
    【MCP教程系列】Node.js+TypeScript搭建NPX MCP服务并自定义部署至阿里云百炼
  • 2
    动态网页爬取：Python如何获取JS加载的数据？
  • 3
    bpmn-js打造最强flowable流程设计器
  • 4
    通义灵码2.5实战评测：Vue.js贪吃蛇游戏一键生成
  • 5
    Debian 11系统下Node.js版本更新方法
  • 6
    Debian 11系统下Node.js版本更新方法详解
  • 7
    JS进阶教程：递归函数原理与篇例解析
  • 8
    基于 Next.js 的书法字体生成工具架构设计与 SSR 优化实践
  • 9
    基于 JavaScript 图算法的局域网网络访问控制模型构建及局域网禁止上网软件的技术实现路径研究
  • 10
    JS代码的一些常用优化写法
  • 1
    Vue 项目中动态添加 HTML 元素的方法与实践
    44
  • 2
    Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
    65
  • 3
    Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
    63
  • 4
    Postman 可以将文档导出为 HTML/Markdown 吗？
    46
  • 5
    精美按钮式广告代码HTML分享
    68
  • 6
    IDEA中配置HTML和Thymeleaf热部署的步骤
    187
  • 7
    Webview+Python：用HTML打造跨平台桌面应用的创新方案
    199
  • 8
    简约404错误页面HTML源码
    100
  • 9
    前端基础的讲解-html(3)
    61
  • 10
    前端基础的讲解-html(2)
    48

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • JavaScript函数
  • JavaScript异步编程

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
  • CSS基础教程
    • 下一篇
    一文了解：阿里云对象存储OSS是什么？