问题：元素明明设置了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. docker下搭建owncloud

    在ubuntu下 搭建owncloud 用docker-compose启动,owncloud.yml文件内容 owncloud: image: owncloud: restart: always 开机 ...

  2. 在基于Android以及Jetson TK平台上如何写32位的Thumb-2指令

    由于Android以及Jetson TK的编译工具链中的汇编器仍然不支持大部分的32位Thumb-2指令,比如add.w,因此我们只能通过手工写机器指令码来实现想要的指令.下面我将简单地介绍如何在AR ...

  3. OpenStack Nova Release（Rocky to Train）

    目录 文章目录 目录 前言 演进方向 Cellv2 更新 Rocky Support disabling a cell Stein Handling a down cell Train Count q ...

  4. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_07-freemarker基础-if指令

    <td <#if stu.name=="小明">style="background-color:cornflowerblue"</#if ...

  5. 简单范例php调用C# WebService

    准备工作:1. 安装IIS对于PHP的支持,看这里2. 要调用Web Service需要nusoap支持,只要弄个nusoap.php就可以了,把它放在要运行的php文件能够引用的地方,比如我放在同一 ...

  6. WhatsApp Group vs WhatsApp Broadcast for Business

    WhatsApp Group vs WhatsApp Broadcast for Business By Iaroslav Kudritskiy If you've read our Ultimate ...

  7. java_guide_类加载器

    类加载器总结 JVM 中内置了三个重要的 ClassLoader,除了 BootstrapClassLoader 其他类加载器均由 Java 实现且全部继承自java.lang.ClassLoader ...

  8. 本机sshd服务开启但是其他机器不能登陆

    问题现象: 发现本机sshd服务开启但是其他机器不能登陆 查看sshd服务 [root@localhost ~]# systemctl status sshd.service ● sshd.servi ...

  9. std::unique_lock与std::lock_guard分析

    背景 C++多线程编程中通常会对共享的数据进行写保护,以防止多线程在对共享数据成员进行读写时造成资源争抢,导致程序出现未定义或异常行为.通常的做法是在修改共享数据成员时进行加锁(mutex).在使用锁 ...

  10. [转帖]linux命令dd

    linux命令dd   dd 是diskdump 的含义 之前学习过 总是记不住 用的还是少. http://embeddedlinux.org.cn/emb-linux/entry-level/20 ...