鼠标经过显示内容
时间:2019-06-12
本文章向大家介绍鼠标经过显示内容,主要包括鼠标经过显示内容使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
鼠标经过的时候,显示出里面的隐藏内容。
里面的设置是,鼠标只有移到第一个 li 的时候才会触发那个事件,因为 css 有控制。我这里控制的是,鼠标移到li之后,如果里面有 none 这个类才会触发这个样式;如代码所示,第二个li里面并没有 none 这个类,所以并不会有干扰。下面写代码的时候,li 里面的类名不要设置一样,就不会有冲突了。除非你想要一样的内容,那就当我没说。
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./vue2.6.10.js"></script> <style lang="scss"> li { width: 100px; height: 30px; background-color: rgba(100, 160, 200, 0.3); } .none { width: 300px; height: 200px; padding: 19px 24px 11px 16px; box-sizing: border-box; background: rgba(255, 100, 0, 0.1); border: 1px solid #999; position: absolute; left: 170px; top: -10px; z-index: 3; display: none;/*在这里把内容给隐藏起来*/ } /* 这里设置li鼠标移过的时候,如果里面有none这个类,才会触发里面的样式。在这里把隐藏内容变为显示 */ li:hover .none { display: block; } </style> </head> <body> <div id="app"> <ul> <li> <a href="#">鼠标经过显示</a> <div class="none">这里是隐藏的内容</div> </li> <!-- 鼠标移到第二个li的时候并不会显示第一个li的隐藏内容,因为css里面有控制 --> <li> 商品列表 </li> </ul> </div> <script> var app = new Vue({ el: '#app', data: { } }) </script> </body> </html>
鼠标没经过的时候效果图
鼠标经过的时候效果图
结束
原文地址:https://www.cnblogs.com/Hajar/p/11008119.html
- 来源于WCF的设计模式:可扩展对象模式[上篇]
- 我的数据访问函数库的源代码(三)——返回结构数组
- 我的数据访问函数库的源代码(四)—— 存储过程部分,包括存储过程的参数的封装
- [WCF 4.0新特性] 路由服务[实例篇]
- [WCF 4.0新特性] 默认终结点
- 三层架构之我见 —— 不同于您见过的三层架构。
- 来源于WCF的设计模式:可扩展对象模式[下篇]
- [WCF 4.0新特性] 标准终结点与无(.SVC)文件服务激活
- 我的数据访问类(第二版)—— for .net2.0 (二)
- 我的数据访问类(第二版)—— for .net2.0 (一)
- [WCF 4.0新特性] 路由服务[原理篇]
- 通过“访问多种数据库”的代码来学习多态!(.net2.0版)
- [WCF-Discovery] 客户端如何能够“探测”到可用的服务?
- WCF的安全审核——记录谁在敲打你的门
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 树莓派基础实验8:振动开关实验
- 几行代码实现cookie的盗取
- 从apollo的初始化看spring boot 1.5.3启动过程( 一)
- CSRF(跨站请求伪造)学习总结
- windows mysql 8.0 ERROR 1045 (28000): Access denied for user 'ODBC'@'localhost' (using password: NO)
- 树莓派基础实验9:蜂鸣器实验
- 浅谈文件上传漏洞(客户端JS检测绕过)
- java字符串操作:如何实现字符串的反转及替换?
- 树莓派基础实验10:干簧管传感器实验
- Java 字节流 字符流 io流
- 写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分 隔。
- 树莓派基础实验11:U型光电传感器实验
- java 缓冲流+原理图解
- 写一个函数,2 个参数,1 个字符串,1 个字节数,返回截取的字符串,要 求字符串中的中文不能出现乱码
- Java 编程,打印昨天的当前时刻.