a标签突出显示盒子非js效果
2017-08-09 18:15
155 查看
鼠标放在相应的标题上,显示对应的盒子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .box{ width: 300px; height: 300px; position: relative; border: 1px solid #000; } ul li{ list-style: none; float: left; display: block; } .box1{ width: 200px; height: 200px; background-color: red; position: absolute; left: 40px; top: 40px; display: none; } .box2{ width: 200px; height: 200px; background-color: blue; position: absolute; left: 40px; top: 40px; display: none; } ul li:first-child:hover .box1{ display: block; //鼠标移上对应li显示盒子 } ul li:nth-child(2):hover .box2{ display: block; } </style> </head> <body> <div class="box"> <ul> <li> 点击显示1 <div class="box1"></div> </li> <li> 点击显示2 <div class="box2"></div> </li> </ul> </div> </body> </html>
相关文章推荐
- a标签突出显示盒子非js效果
- css效果,在一个盒子里,把一部分内容隐藏掉,在鼠标悬停到div时,就会把隐藏的部分向上显示出来。 不用js操作,纯css就可以。
- Js实现当前点击a标签变色突出显示其他a标签回复原色
- jquery教程:仿miqike.com首页"热门标签"层绝对定位 点击隐藏/点击显示JS效果
- Js实现当前点击a标签变色突出显示其他a标签回复原色
- jquery/js当前URL对当前栏目高亮突出显示
- js实现具有高亮显示效果的多级菜单代码
- jQuery事件 mouseover方法与mouseout方法实现鼠标移进显示移出消失的效果 (css控制span标签)
- html使用display:inline-block实现标签右对齐,值左对齐效果。和设置div宽度,并居中显示。嵌套div的里层div文字居中显示
- js菜单点击显示或隐藏效果的简单实例
- Js 网页上反复显示隐藏效果的文本
- JS实现在状态栏显示打字效果完整实例
- 点击小图显示大图JS效果插件
- 关于 JS 效果不显示的问题
- 如何实现js展开收起(折叠)效果呢?例如:一段内容过长了,我限制他显示为20个字内,但是超出了20的就先用省略号代替,然后后面添加一个展开,点击展开后就显示所有的内容,这时候展开按钮就变成了 折叠按钮
- js把预定义的html字符串转换为 HTML 实体 htmlspecialchars 输出html实体内容包括标签,而不自动转义标签,只显示内容,类似php的htmlspecialchars
- JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
- js实现一种非常酷而又实用的图片显示效果
- 点滴积累【JS】---JS小功能(setInterval实现图片效果显示时间)
- JS实现title标题栏文字不间断滚动显示效果