<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
span{
display: none;
margin-top: 50px;
}
p{
float: left;
width: 200px;
text-align: center;
border: 1px solid red;
}
p:hover span{
cursor: pointer;
display: block;
}
span:hover{
background: pink;
}
</style>
</head>
<body>
<div>
<p>获取焦点
<span>我们都是好孩子</span>
<span>我们都是好孩子</span>
<span>我们都是好孩子</span>
<span>我们都是好孩子</span>
<span>我们都是好孩子</span>
<span>我们都是好孩子</span>
<span>我们都是好孩子</span>
</p>
<p>获取焦点
<span>我们都是好孩子</span>
<span>我们都是好孩子</span>
<span>我们都是好孩子</span>
<span>我们都是好孩子</span>
<span>我们都是好孩子</span>
<span>我们都是好孩子</span>
</p>
</div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</html>

纯css，编写菜单移入效果的更多相关文章

  1. 不可思议的纯 CSS 实现鼠标跟随效果

    直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...

  2. 不可思议的纯 CSS 滚动进度条效果

    结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...

  3. 纯css实现翻书效果

    前言 最近研究了一下css3的3D效果,写了几个demo,写篇博客总结一下实现的经过.PS:如果对transform-origin/perspective/transform-style这些概念还不了 ...

  4. 纯CSS焦点轮播效果-功能可扩展

    个人博客: http://mcchen.club 纯CSS3实现模拟焦点轮播效果,支持JQ等扩展各项功能.废话少说,直接贴代码. <!DOCTYPE html> <html> ...

  5. css之纯css实现流程导航效果

    :::tip 使用纯css线上 流程导航效果.     本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一 利用裁剪  该方法IE下不支持 利用裁剪 clip ...

  6. 纯css实现星级评分效果

    效果 效果图如下,纯css实现超酷炫的星级评分动画效果 ​ 实现思路 5个类型为radio的input,label标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字 点击星星有放大旋 ...

  7. 纯CSS实现3D按钮效果

    今天分享一个用纯CSS实现的3D按钮.css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值.让人感觉有一种按钮被按下的感觉.css代码非常 ...

  8. day19—纯CSS实现菜单列表下框跟随效果

    转行学开发,代码100天——2018-04-04 今天看到一篇介绍利用CSS实现列表下跟随效果的设计文章,如下图,当鼠标滑过列表项时,要求该项内容下的黑色下边框线实现同方向的跟随移动. 其中,列表内容 ...

  9. HTML5 CSS3专题 纯CSS打造相冊效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这种一个样例.感觉效果还不错,不记得啥时候 ...

随机推荐

  1. perl 如何匹配ASCII码以及ASCII码转换

    匹配ASCII码:   /[:ascii:]/ ASCII码转换为数字: ord() 数字转换为ASCII码: chr()

  2. ECharts的简单使用过程

    网页中经常要使用图表,以前使用的是highcharts插件,现在发现echarts使用起来和highcharts差不多,但是个人感觉echarts更酷炫,以下是echarts的使用过程,其实highc ...

  3. java入门笔记001--java环境搭建

    1. 常见dos命令 •dir : 列出当前目录下的文件以及文件夹 •md : 创建目录 •rd : 删除目录 •cd : 进入指定目录 •cd.. : 退回到上一级目录 •cd\: 退回到根目录 • ...

  4. elasticsearch高级配置一 ---- 分片分布规则设置

    cluster.routing.allocation.allow_rebalance 设置根据集群中机器的状态来重新分配分片,可以设置为always, indices_primaries_active ...

  5. Eclipse安装Spring-tool-suite

    目录结构: // contents structure [-] 在Eclipse上安装Spring-tool-suite的方法有那些 如何查看自己的Eclipse版本 如何知道自己的Eclipse对应 ...

  6. JavaScript中数据类型转换总结

    JavaScript中数据类型转换总结 在js中,数据类型转换分为显式数据类型转换和隐式数据类型转换. 1, 显式数据类型转换 a:转数字: 1)Number转换: 代码: var a = " ...

  7. Atitit ati licenseService    设计原理

    Atitit ati licenseService    设计原理 C:\0workspace\AtiPlatf\src_atibrow\com\attilax\license\LicenseX.ja ...

  8. iOS之数字的格式化

    //通过NSNumberFormatter,同样可以设置NSNumber输出的格式.例如如下代码: NSNumberFormatter *formatter = [[NSNumberFormatter ...

  9. dyld 加载 Mach-O

    ➠更多技术干货请戳:听云博客 前言 最近看 ObjC的runtime 是怎么实现 +load 钩子函数的实现.进而引申分析了 dyld 处理 Mach-O 的这部分机制. 1.简单分析 Mach-O ...

  10. seL4之hello-2旅途(完成更新)

    seL4之hello-2旅途 2016/11/19 13:15:38 If you like my blog, please buy me a cup of coffee. 回顾上周 seL4运行环境 ...