一直使用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. Orcale创建函数（function）

    Oraclec创建函数的语法规则 create or replace function  函数名 (参数名1 参数类型,参数名2 参数类型)  return number  is Result num ...

  2. 2017第八届蓝桥杯决赛（C++ B组）2.磁砖样式

    磁砖样式 小明家的一面装饰墙原来是 310 的小方格. 现在手头有一批刚好能盖住2个小方格的长方形瓷砖. 瓷砖只有两种颜色:黄色和橙色. 小明想知道,对于这么简陋的原料,可以贴出多少种不同的花样来. ...

  3. 在docker容器中安装vim命令进行编辑文件

    首先执行: 执行apt-get update, 然后再次执行apt-get install vim即可成功安装vim. 然后我们就可以使用vim编辑 如果不进行更新就会报错: 此时会报出bash: v ...

  4. ul li做横向导航栏例子

    /* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: ...

  5. python+selenium 使用jinkens构建时，无法打开浏览器（已解决）

    inkens 我不用的是war包,就是直接丢在tomcat webapps文件夹就能生效的.因为不是安装,所以网上说把jinkens的服务改为管理员启动是不行的.下面一步步来解决这个问题吧. 1.找到 ...

  6. 8.JSP基础

    1.Servlet与JSP关系 JSP工作原理: 一个JSP文件第一次被请求时,JSP引擎把该JSP文件转换成为一个servlet JSP引擎使用javac把转换成的servlet的源文件编译成相应的 ...

  7. 如何用Rational rose创建类图

    UML中各种图形概要: 图名 对照 说明 用例图 use case diagram 用例图表明系统做什么,与谁交互.用例是系统提供的功能,参与者是系统与谁交互,参与者可以是人.系统或其他实体.一个系统 ...

  8. 转 mysql front安装与使用教程 mysql 工具

    mysql front安装与使用教程 由 kaikai0220 创建,Alma 最后一次修改 2018-04-25 mysql front一款小巧的管理Mysql的应用工具,那么这个工具该如何安装和使 ...

  9. ora-1652

    ###检查是否有temp 在使用 step 2: 检查是否有事务使用到temp,并且进行删除. SELECT vt.inst_id,vs.sid,vs.serial#,vs.username,vs.o ...

  10. Dev Express Report 学习总结（二）关于如何使用Grouping分组

    对于所有的报表工具来说,基本上所有Grouping功能的都很相似.正如前面说到的,Group处于Page Header和Page Footer之间,同时又将Detail包括与其中. 下面还是通过一个例 ...