一直使用jQuery的hover()函数来写鼠标经过事件，这几天发现其他同行直接使用CSS就搞定了。自己在线下也试了试：

当然也并不是没有前提条件，需要配合一些定位属性来使用（position/top/left）。代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>Title</title>

   <link rel="stylesheet" href="css/bootstrap.css" />

   <style>

   .outer {

      position: relative;

      width: 150px;

   }

   .link {

      padding: 0 18px;

      height: 50px;

      display: block;

      z-index: 2;

      background: #373d41;

      border-right: 1px solid #2a2f32;

      color: #fff;

      font-size: 14px;

      line-height: 50px;

      text-decoration: none;

   }

   .link:hover {

      background: #373d41

   }

   .appear-hide {

      position: absolute;

      top: 50px;

      left: 0;

      background: #ccc;

      color: #000;

      opacity: 0;

      visibility: hidden;

    }

   .outer:hover .appear-hide {

       opacity: 1;

       visibility: visible;

    }

    .test {margin-top: 20px}

   </style>

</head>

<body>

   <div class="outer">

      <a class="link" href="javascript:;">点击出现或隐藏</a>

      <div class="appear-hide">

         <p>CSS、CSS3</p>

         <p>HTML、HTML5</p>

         <p>JavaScript、ES6</p>

         <p>HTTP协议</p>

         <p>性能优化</p>

         <p>一门后端语言</p>

         <p>更好的方式写代码</p>

         <p>线下开发和代码发布</p>

      </div>

   </div>

   <div class="test">

      <p>CSS、CSS3</p>

      <p>HTML、HTML5</p>

      <p>JavaScript、ES6</p>

      <p>HTTP协议</p>

      <p>性能优化</p>

      <p>一门后端语言</p>

      <p>更好的方式写代码</p>

      <p>线下开发和代码发布</p>

   </div>

</body>

</html>
  • 至于为何要配合定位属性来使用，可先了解visibility属性：visibility 属性_w3cschool
  • 另一属性opacity：opacity 属性_w3cschool，对于w3cschool上的有一地方没看明白，加了CSS后测试了下，发现.test的子元素p并没有继续其opacity属性值。

没看明白的地方：

添加的CSS代码：

    .test {

       margin-top: 20px;

       opacity: 0.5;

    }

子元素p并没有继续其opacity属性值：

然而这时有个小问题，鼠标放到链接元素上时再移动到类为.appear-hide的div上时，会发现还没移动到div下方它就隐藏了，就是鼠标放上去只能显示却不能对显示的div进行相应的点击等操作，这时解决的办法：

  • 去掉.test的opacity属性或设置opacity:1；
  • 如果不想更改.test的opacity属性值为1或去掉，那.outer值的z-index设置得比.test的大就行，这里.test的z-index属性没有设置，.outer属性值设置为1即可。

小结：当然这只是简单的鼠标经过显示事件，复杂一些的还是需要使用jQuery等来写。

巧用CSS属性visibility与opacity代替鼠标经过的jQuery事件的更多相关文章

  1. python+selenium：解决上传文件<input type='file'>标签属性被css的visibility隐藏导致无法定位元素的问题

    要想上传文件,需要找到在HTML中<input type="file" />这个标签,有它就可以利用send_keys上传文件,不过这里的<input>元素 ...

  2. 小tip:巧用CSS3属性作为CSS hack——张鑫旭

    一.开篇小问题 题目:实现类似下图的宽度自适应效果,IE9+,FireFox,Chrome,Opera等使用CSS3实现,IE6~8浏览器使用图片实现. 计时思考…… 二.思考中 ————- 假设这是 ...

  3. CSS属性中Display与Visibility的不同

    大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的.visibility属性用来确定元素是显示还是隐藏,这用visibility=&qu ...

  4. css属性编写顺序+mysql基本操作+html细节（个人笔记）

    css属性编写顺序: 影响文档流的属性(比如:display, position, float, clear, visibility, table-layout等) 自身盒模型的属性(比如:width ...

  5. 前端开发--css属性书写顺序

    css属性顺序是css良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作.(依次排后) example { /*显示属性*/ display: ; visibility: ; ...

  6. Mozilla推荐的CSS属性书写顺序及命名规则

    传说中的Mozilla推荐 /* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * ...

  7. CSS属性一览

    CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打 ...

  8. Transition 所支持的css属性

    transition-property是用来指定当元素其中一个属性改变时执行transition效果: 所支持的属性类型如下: color: 通过红.绿.蓝和透明度组件变换(每个数值处理)如:back ...

  9. CSS属性操作

    CSS属性操作 1 属性选择器 Elenment(元素) E[att] 匹配所有具有att属性的E元素,不考虑它的值.(注意:E在此处可以省略)(推荐使用) 例如:[po]{ font-size: 5 ...

随机推荐

  1. 解读人：董鑫，Disease Development Is Accompanied by Changes in Bacterial Protein Abundance and Functions in a Refined Model of Dextran Sulfate Sodium (DSS)-Induced Colitis

    文章中文名:在葡聚糖硫酸钠(DSS)诱导下的结肠炎模型伴随着细菌蛋白质丰度和功能的改变 单位: 1 Helmholtz-Centre for Environmental Research - UFZ, ...

  2. [比赛|考试]nowcoder 小白月赛7

    牛客小白月赛7 比赛地址.本次比赛我切了8道(ACM赛制),rank(20). 反思:刚入手ACM赛,光追求刺激了,没有总结ACM赛制的经验.是应该多提交>..还是少提交...小白赛还有两道不会 ...

  3. 如何实现 MySQL 的读写分离？MySQL 主从复制原理的是啥？如何解决 MySQL 主从同步的延时问题？

    如何实现 MySQL 的读写分离? 其实很简单,就是基于主从复制架构,简单来说,就搞一个主库,挂多个从库,然后我们就单单只是写主库,然后主库会自动把数据给同步到从库上去. MySQL 主从复制原理的是 ...

  4. OpenCV&Qt学习之四——OpenCV 实现人脸检测与相关知识整理

    开发配置 OpenCV的例程中已经带有了人脸检测的例程,位置在:OpenCV\samples\facedetect.cpp文件,OpenCV的安装与这个例子的测试可以参考我之前的博文Linux 下编译 ...

  5. 黑马JavaScript学习一 BOM之Window对象定时器功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 下载GitHub仓库的某个子文件夹

    http://downgit.zhoudaxiaa.com/#/home

  7. mybatis 遍历字段和字段对应的值循环插入

    java代码: /** * 插入单条数据 * @param request * @param response * @param id * @param str * @return * @throws ...

  8. 老男孩python作业3-购物车程序优化

    购物车优化要求:用户入口: 1.商品信息存在文件里 2.已购商品,余额记录.第一次启动程序时需要记录工资,第二次启动程序时谈出上次余额 3.允许用户根据商品编号购买商品 4.用户选择商品后,检测是否够 ...

  9. python3 sorted()函数笔记

    import randoma=[]for i in range(9): b=random.randint(0,9)#生产9个随机数 a.append(b)#把生成的随机数添加到列表里面print(so ...

  10. thinkphp模板布局

    不知道我们会不会有这样一个困惑,,每当进行一个项目时,发现页面都有好多重复的地方,假如我们每个页面都写,不仅降低的代码的运行效率 而且还不利于后期维护!TP中的模板布局就解决了这一难题! 我们就以Ad ...