一直使用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. 使用Spring IOC容器引用外部属性文件

    一.引用外部属性文件 1.编写属性文件,以键值对形式存储,并放置在类路径(src)下 jdbc.jdbcUrl=jdbc:mysql://localhost:3306/BOOKSTORE?rewrit ...

  2. luogu1891 疯狂lcm ??欧拉反演?

    link 给定正整数N,求LCM(1,N)+LCM(2,N)+...+LCM(N,N). 多组询问,1≤T≤300000,1≤N≤1000000 \(\sum_{i=1}^nlcm(i,n)\) \( ...

  3. c++ string.c_str()小结

    c++ const char *c_str(); c_str()函数返回一个指向正规C字符串的指针常量, 内容与本string串相同.(其实它指向的是string对象内部真正的char缓冲区),所以返 ...

  4. C++基础学习8：类的定义(class)

    先来说说C和C++中结构体的不同 a) C语言中的结构体不能为空,否则会报错(??) b) C语言中内存为空结构体分配大小为0,C++中为结构体和类分配大小为1byte c) C语言中的结构体只涉及到 ...

  5. anglarJs前端控制器的继承

    继承就是将相关内容进行抽离,将公共部分进行分离,然后被其他模块继承就可以实现多用 例如抽离分页部分: //品牌控制层 app.controller('baseController' ,function ...

  6. 09. ajax跨域问题,同源策略

    有三个标签允许跨域加载资源 <img src=“”/> <link href=“”/> <script src=“”> 可以做防盗链图片功能   前端使用jsonp ...

  7. C/C++中qsort()以及sort()的用法

    最近学弟们问快速排序的比较多,今天自己就做一下总结,快速排序在库函数里面有现成的,不用自己实现,调用一下就可以达到自己想要的结果,掌握以后就可以完全摒弃冒泡和选择了,并且时间复杂度也从O(n*n)提升 ...

  8. 制作网页logo

    一.先把jpg.png.jpeg等图片通过在线ico图标制作软件变成.ico图片 在线制作ico图标工具: http://www.bitbug.net/ 二.在head里面添加如下代码 <lin ...

  9. 实时同步inotify+rsync

    目的,要求 nfs储存服务器与backup备份服务器,数据同步,万一nfs储存服务器挂了,数据还在 实时同步备份软件服务 1)inotify 实时同步软件 2)sersync 实时同步软件 实时同步原 ...

  10. 27-----BBS论坛

    BBS论坛(二十七) 27.首页帖子列表布局完成 (1)apps/models.py 把帖子跟用户关联起来 class PostModel(db.Model): __tablename__ = 'po ...