问题：元素明明设置了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. SQL-W3School-高级：SQL LIKE 操作符

    ylbtech-SQL-W3School-高级:SQL LIKE 操作符 1.返回顶部 1. LIKE 操作符用于在 WHERE 子句中搜索列中的指定模式. LIKE 操作符 LIKE 操作符用于在 ...

  2. C# mongodb 类库

    https://github.com/mongodb/mongo-csharp-driver/downloads https://github.com/mongodb/mongo-csharp-dri ...

  3. sql控制流if()、case when then

    tb_user: 1.if (expr1,expr2,expr3) #如果expr1成立,则返回expr2,否则返回expr3示例:select  name, if (sex=1,'男','女')  ...

  4. 08ListView动态列表组件 以及循环动态数据

    效果: main.dart import 'package:flutter/material.dart'; import 'res/listData.dart'; /* ListView:参数 scr ...

  5. PAT 甲级 1017 Queueing at Bank (25 分)（模拟题，有点思维小技巧，第二次做才理清思路）

    1017 Queueing at Bank (25 分)   Suppose a bank has K windows open for service. There is a yellow line ...

  6. Python生成随机数组的方法小结

    Python生成随机数组的方法小结 本文实例讲述了Python生成随机数组的方法.分享给大家供大家参考,具体如下: 研究排序问题的时候常常需要生成随机数组来验证自己排序算法的正确性和性能,今天把Pyt ...

  7. [C++/JavaScript]数据结构：栈和数列>案例引入(数制的转换)

    1 案例1:数制的转换 1.1 背景与原理 1.2 编程复现 (JavaScript版 复现) function convert(value, d){ stack = []; // 栈 result ...

  8. CentOS查看每个进程的网络流量

    所需工具nethogs 安装:yum install -y nethogs 使用:nethogs eth0 sudo nethogs -s //按接收流量大小排序 如上图,PID一列就是进程的PID, ...

  9. Python随笔日记（1）

    Python学习 1.安装python .之后在Windows中配置环境变量(计算机\属性\高级系统设置\环境变量\系统变量\path后加入 :路径) 2.注意变量的命名的规则 字母.数字.下划线 p ...

  10. GRU网络

    1.GRU(Gated Recurrent Unit) 为了克服RNN无法远距离依赖而提出了LSTM,而GRU是LSTM的一个变体,GRU保持LSTM效果的同时,又使结构变得简单. 2.GRU结构 G ...