一直使用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. P3978 [TJOI2015]概率论

    \(\color{#0066ff}{ 题目描述 }\) 为了提高智商,ZJY开始学习概率论.有一天,她想到了这样一个问题:对于一棵随机生成的n个结点的有根二叉树(所有互相不同构的形态等概率出现),它的 ...

  2. Julia体验 语言特性 元编程，宏

    上接语言基础,就release-1.1来看,个人感觉这门语言和自己心中的理想国相距较远.这门语言因为受众不仅仅是程序员有很多让人迷惑的设计,但是奇怪的是它的语法等表象设计虽然暗示这不是专门为程序员准备 ...

  3. J.U.C-其他组件

    J.U.C-其他组件 FutureTask   介绍Callable时我们知道它可以有返回值,返回值通过Future进行封装.FutrueTask实现了RunnableFuture接口,该接口继承了R ...

  4. redis分布式锁的使用

    一  本身自带的方法进行使用: <dependency> <groupId>redis.clients</groupId> <artifactId>je ...

  5. 安装gitlab-runner

    # 下载 $sudo wget -O /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/lat ...

  6. webpack4.0入门配置文件

    wepback风头正火 ,但是公司一直在用gulp,正好赶上年底活动,借此机会第一次尝试了webpack,说实话webpack真的很强大,内容一层一层递进. 这几天跟着官网跑了一遍,然后写了自己的配置 ...

  7. ubuntu14.04&matlab2015b 测试caffe的Matlab接口

    Step1: 修改caffe-master中的Makefile.config 提示:可以到文件中直接“ctrl+f”,键入相应大写字母即可查找到相应位置. Step2:编译接口.如果之前编译caffe ...

  8. ubuntu 常用安装软件

    1. Ubuntu安装chrome. sudo apt-get install chromium-browser w

  9. 《mac的git安装手册-2》

    <mac的git安装手册-2> 下载地址 https://git-scm.com/downloads 如果遇到打不开的情况,请在系统偏好设置内——>安全性与隐私下 ——>选择仍 ...

  10. DRF接入Oauth2.0认证[微博登录]报错21322重定向地址不匹配

    DRF接入Oauth2.0认证[微博登录]报错21322重定向地址不匹配 主题自带了微博登陆接口,很简单的去新浪微博开放平台创建了网页应用,然后把APP ID和 AppSecret填好后,以为大功告成 ...