问题：元素明明设置了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. WPF清爽酷炫的界面Mahapps.metro

    最近WPF项目中要求软件的风格要传统化一点,查阅了下资料发现了Mahapps.metro. 官网 http://mahapps.com/ 下面是官方的DOME,https://github.com/M ...

  2. MongoDB作为windows服务来安装-2

    首先区官网下载对应版本的安装文件,我本地的环境是win7 bit64 我下载的版本是:mongodb-win32-x86_64-2.4.6 ok, 文件下载后,开始安装,这里要说一下,如果直接启动Mo ...

  3. PAT 甲级 1012 The Best Rank (25 分)（结构体排序）

    题意: 为了评估我们第一年的CS专业学生的表现,我们只考虑他们的三个课程的成绩:C - C编程语言,M - 数学(微积分或线性代数)和E - 英语.同时,我们鼓励学生强调自己的最优秀队伍 - 也就是说 ...

  4. 比特币nBits计算

    转载:比特币源码分析(二十二) - 挖矿和共识 https://blog.csdn.net/yzpbright/article/details/81231351 CalculateNextWorkRe ...

  5. sed例子

    以care.log这个log文件为例, care.log: 05:44:31,816 DEBUG RawAggregationWorker:70 - LTS is working on Raw Dat ...

  6. python之selenium多窗口切换

    前提: 在页面操作过程中有时候点击某个链接会弹出新的窗口,这就需要主机切换到新打开的窗口上.WebDriver提供了switch_to.window()方法,可以实现在不同的窗口之间切换. 内容: 以 ...

  7. Unity 实现橡皮擦效果

    我所实现的橡皮擦效果是设置图片某点的像素的透明度为0,来简单实现擦除效果的: 下面是效果 首先需要注意两点:1:设置 Main Camera 的 projection 属性为Orthographic ...

  8. web漏洞

    *参考网站 https://cxsecurity.com/ https://www.exploit-db.com/ https://www.seebug.org/ http://www.securit ...

  9. 输出重定向之python2和python3的区别

    python语句支持输出重定向到文件里,与shell类似使用“>>”来重定向输出. python2: logfile = open('mylog.txt', 'a') print > ...

  10. 深入理解JS的事件绑定、事件流模型

     一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresi ...