问题：元素明明设置了display:none，但是在刷新页面的时候却会先显示了出来，然后才会隐藏，实现display:none

原因：由于元素渲染的时候，样式还没有应用上去，导致的

解决办法：使用内联样式，动态改变display的值为none或者是block，使用moseenter和mouseleave事件替代hover，在moseenter和mouseleave事件中去改变display的值

解决设置了display:none的元素，会先展示再隐藏的更多相关文章

  1. 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

  2. 元素设置为display:none，其绑定的事件仍存在

    元素设置为display:none,虽然该元素从页面中消失了,其绑定的事件仍存在. <body> <button class="button1">chang ...

  3. 小程序scroll-view组件使用时，子元素虽设置样式display:inline-flex;whit-space:nowrap

    小程序scroll-view组件使用时,子元素虽设置样式display:inline-flex;whit-space:nowrap

  4. 实现span设置宽度（行内元素本来不支持调宽度高度这些样式）（变成行内块元素：display:inline-block;）

    实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;) 一.总结 1.将span从行内元素变成行内快元素就可以调了: 设置样式的时候 ...

  5. 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法

    内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...

  6. 若块级元素被设置为 display: table-cell 便无法设置宽度

    工作中,遇到表格的单元格中的 div 设置宽度无效,后来是发现 div 被设置为 display: table-cell ,后将其修改为 display: block 则设置的宽度生效.

  7. CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析

    说明 opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见. opacity.visibility.display 这三个属性 ...

  8. 设置overflow:hiden行内元素会发生偏移的现象

    父级元素包含几个行内元素 <div id="box"> <p> <span>按钮</span> <span>测试文字文字 ...

  9. from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置

    目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...

随机推荐

  1. JAVA 基础编程练习题32 【程序 32 左移右移】

    32 [程序 32 左移右移] 题目:取一个整数 a 从右端开始的 4-7 位. 程序分析:可以这样考虑: (1)先使 a 右移 4 位. (2)设置一个低 4 位全为 1,其余全为 0 的数.可用~ ...

  2. iOS-上传头像的使用

    static NSString *const uploadSuccess = @"更改头像成功"; @interface DMAccountInformationViewContr ...

  3. ubuntu16.04 下通过rc.d(rc.local)实现开机启动(未登录)anydesk

    先编辑anydesk-X.X.X/init/anydesk文件,将"DAEMON=//usr/bin$NAME"改成"DAEMON=/XXX/anydesk-5.1.1/ ...

  4. PHP常用正则表达式精选

    $regex = '[\u4e00-\u9fa5]'; //匹配中文字符的正则表达式 $regex = '^[\u4E00-\u9FA5A-Za-z0-9]+$'; or $regex = '^[\u ...

  5. ”Unstanding the Bias-Variance Tradeoff“主题内容翻译

    对预测模型讨论,预测误差(error)分两类:偏差(bias)造成的误差与方差(variance)造成的误差.最小化偏差与方差的一个权衡.理解这两类误差有利于诊断模型结果和避免过拟合和欠拟合. 偏差与 ...

  6. linux 抓包工具tcpdump和tshark

    yum install tcpdump tcpdump -nn -c 100 抓一百条 tcpdump -nn -i eth0 指定网卡 tcpdump -nn port 22 指定端口 tcpdum ...

  7. ActiveMQ单机部署及简单应用

    系统版本:Centos 7 前言 MQ是消息中间件,是一种在分布式系统中应用程序借以传递消息的媒介,常用的有ActiveMQ,RabbitMQ,kafka.ActiveMQ是Apache下的开源项目, ...

  8. C语言--分支结构

    一.PTA实验作业 题目1:7-1 计算分段函数[2] 1.实验代码 float x, y; printf("Enter x:\n"); scanf("%f", ...

  9. [转帖]localectl

    localectl http://linux.51yip.com/search/localectl localectl 命令简介. 相关命令:暂无相关命令 localectl — 控制系统的本地化与键 ...

  10. ORACLE initialization or shutdown in progress 错误解决办法

    第一步,运行cmd 第一步.sqlplus /NOLOG第二步.SQL>connect sys/change_on_install as sysdba'/提示:已成功第三步.SQL>shu ...