精华内容
下载资源
问答
  • 主要是ie8及ie8以下版本浏览器会出现此问题, 问题核心是因为hover选择器没有缓存即将要替换的图片, 所以导致替换期间有一个极其短暂的空白期. 解决方案: 采用 background-position 的方式, 可缓解此问题. 但是低...

    主要是ie8及ie8以下版本浏览器会出现此问题, 问题核心是因为hover选择器没有缓存即将要替换的图片, 所以导致替换期间有一个极其短暂的空白期.

    解决方案:

    采用 background-position 的方式, 可缓解此问题. 但是低版本内核的浏览器在鼠标移动过快时, 仍然可以略微看到痕迹.

    转载于:https://www.cnblogs.com/jiyang2008/p/5306659.html

    展开全文
  • 鼠标hover 闪烁崭新发光css代码

    千次阅读 2016-03-21 11:03:29
    .mb_list a.mba:hover i  { left :  268px ; transition :  .5s ; -moz-transition :  .5s ; -o-transition :  .5s ; -webkit-transition :  .5s ; } ] 网址案例 http://www.aspku.com/php/

    <style>

    .mb_list a.mba i  {
    1. background-imagelinear-gradient(0deg, rgba(255,255,255,0) , rgba(255,255,255,0.7) , rgba(255,255,255,0) );
    }


    .mb_list a.mba:hover i  {
    1. left268px;
    2. transition.5s;
    3. -moz-transition.5s;
    4. -o-transition.5s;
    5. -webkit-transition.5s;
    }

    ]</style>

    鼠标hover 闪烁崭新发光css代码 - ☆奋力拼搏☆ - 北方的…郎

    网址案例 http://www.aspku.com/php/



    展开全文
  • 使用Css Hover 时隐藏Div 导致死循环,不断闪现。
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			.content{
    				width: 300px;
    				height: 300px;
    			}
    			.test{
    				width: 200px;
    				height: 200px;
    				background-color: red;
    			}
    			
    			.test1:hover{
    				display: none;
    			}
    			
    			.test2:hover > .item{
    				display: none;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="content">
    			<div class="test test1">
    				:hover display: none  不断闪现
    			</div>
    			
    		</div>
    		
    		<div class="content">
    			<div class="test test2">
    				<div class="item">
    					这个影藏了不会闪现
    				</div>
    			</div>
    		</div>
    		
    		
    	</body>
    </html>
    

     

    如上面的 代码:

    造成闪现的原因:

     当上面代码中 class="test1" 被 hover 后就隐藏,但是隐藏后该元素就没有被hover住了又会显示出来。显示出来后又被hover 又被隐藏。这样不断重复就成了上面的不断闪的效果。

    我的解决方法:

    我在test1 div 的代码基础上增加了一个子元素。形成了test2 div的代码。 把内容写在子元素里面。当我想要hover隐藏内容时就隐藏被hover对象的子元素。那样hover的作用也会一直生效。

     

    -----------------------------------------------------------------------------------------------------------------------------------------------------------------------

    你还有其他的解决方法吗?欢迎分享相应的解决方法。

    展开全文
  • ​1、谈谈你对CSS布局的理解常见的布局方式:固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding2、请列举几个清除浮动的方法(1)使用clear属性(2)使用br标签和其自身的HTML属性(3)通过设置父元素的...

    7187997f54c431ad89bf0626e3a0db77.png

    1、谈谈你对CSS布局的理解

    常见的布局方式:固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding

    2、请列举几个清除浮动的方法

    (1)使用clear属性

     

    (2)使用br标签和其自身的HTML属性

     

    (3)通过设置父元素的样式,实现清除浮动,例如:

    • 父元素设置 overflow:hidden
    • 父元素设置 overflow:auto
    • 父元素设置 display:table
    • 父元素也设置浮动样式

    (4)使用 :after 伪元素

    3、请列举几种隐藏元素的方法

    visibility:hidden,这个属性只是简单的隐藏某个元素,但是元素占用的空间任然存在;

    opacity:0,是CSS3的属性,设置元素为完全透明,和 visibility 的效果类似,但是该属性修饰的元素可以使用 transition 和 animate 设置动画效果;

    display:none,设置元素为不可见,不会占用文档的空间;

    hidden属性,该属性是HTML5中新增的属性,效果和 display 相同;

    4、如何让一段文本中的所有英文单词的首字母大写

    text-transform: none | capitalize(将每个单词的第一个字母转为大写) | uppercase(将每个单词都转为大写)| lowercase(将每个单词都转为小写)

    5、请简述CSS样式表的继承

    CSS样式表继承指的是,特定的CSS属性向下传递到子孙元素。会被继承下去的属性如下:

    文本相关:font-family,font-size, font-style,font-variant,font-weight, font,letter-spacing,line-height,color;

    列表相关:list-style-image,list-style-position,list-style-type, list-style;

    6、请简述CSS的选择器

    元素选择器:* 、E、 E#id、 E.class

    关系选择器:E、F、E>F、E+F、E~F

    属性选择器:E[att]、E[att="val"]、E[att~="val"]、E[att^="val"]、E[att$="val"]、E[att*="val"]、E[att|="val"]

    伪类选择器:E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等

    伪对象选择器:E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection

    7、CSS伪类与CSS伪对象的区别

    CSS引入伪类和伪元素的概念是为了描述一些现有CSS无法描述的东西,根本区别在于:它们是否创造了新的抽象元素;

    伪类:描述了所有逻辑上存在但在文档树中无须标识的分类;

    伪对象:代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中;

    8、请简述CSS的权重规则

    行内样式 > ID > 属性选择器/class类/伪类选择器 > 元素名/伪对象选择器;

    关系选择器将拆分为两个选择器再计算权重。

    9、请写出多种等高布局

    • 假等高布局:使用背景图片,在列的父元素上使用这个背景图进行Y轴的铺放,从而实现一种等高列的假象
    • 给容器div使用单独的背景色(固定布局、流体布局):用元素中的最大高度撑大其他的容器高度
    • 创建带边框的两列等高布局:用border-left来做,只能使用两列
    • 使用正padding和负margin对冲实现多列布局方法:在所有列中使用正的上下padding和负的上下margin,并在所有列外面加上一个容器,设置overflow:hidden把溢出背景切掉
    • 使用边框和定位模拟列等高:但不能使用在多列
    • 模拟表格布局等高效果:兼容性不好,在IE6/7无法正常运行

    10、在CSS样式中使用px、em,各有什么优势,在表现上有什么区别?

    px是相对长度单位,相对于显示器屏幕分辨率而言的;

    em是相对长度单位,相对于当前对象内文本的字体尺寸;

    px定义的字体,无法用浏览器字体放大功能;em的值并不是固定,会继承父级元素的字体大小,

     1 ÷ 父元素的font-size × 需要转换的像素值 = em值

    11、CSS中link和@import 的区别是什么?

    • link属于HTML标签,而 @import 是CSS提供的,只能加载CSS;
    • 页面被加载时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
    • @import只能在IE5以上才能识别,而link是HTML标签,无兼容问题;
    • link方式的样式权重高于@import的权重;
    • 当使用javascript控制DOM去改变样式的时候,只能使用link方式,因为@import只有CSS才能识别,DOM无法控制;

    12、position的absolute与fixed共同点与不同点?

    相同:

    • 改变行内元素的呈现方式,display被置为block
    • 让元素脱离普通流,不占据空间
    • 默认会覆盖到非定位元素上

    区别

    • absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口。
    • 当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的。

    13、position的值,relative 和 absolute 分别是相对于谁进行定位的?

    absolute:生成绝对定位的元素,相对于 static 定位以外的第一个祖先元素进行定位

    fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。(IE6不支持)

    relative:生成相对定位的元素,相对于其在普通流中的位置进行定位

    static:默认值。没有定位,元素出现在正常的流中

    14、CSS3有哪些新特性?

    新增特性有:圆角(border-radius)、阴影(box-shadow)、对文字加特效(text-shadow)、线性渐变(gradient)、变形(transform);

    增加了更多的CSS选择器,媒体查询,多栏布局,多背景rgba,引入伪元素::selection。

    15、为什么要初始化CSS样式

    因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没有初始化CSS,往往会出现浏览器之间的页面显示差异;

    CSS样式初始化之后会对SEO有一定的影响。

    16、解释下 CSS sprites 原理,及优缺点?

    CSS sprites 其实就是把网页中的一些背景图片整合到一张图片文件中,在利用CSS的 background-image,background-repeat,background-position的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。

    优点:

    • 减少网页的http请求
    • 减少图片的字节
    • 解决网页设计师在图片命名上的困扰,只需要对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名
    • 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变了

    缺点:

    • 在宽屏,高分辨率的屏幕下的自适应页面,如果背景图不够宽,很容易出现背景断裂
    • CSS sprites 在开发的时候,需要通过Photoshop或其他工具测量计算每一个背景单元的精确位置
    • 在维护的时候比较麻烦,如果页面背景有少许改动,一般就要修改这张合并的图片

    17、解释一下浮动及其工作原理?

    浮动元素脱离文档流,不占据空间(引起“高度塌陷”现象);

    浮动元素碰到包含它的边框或者浮动元素的边框停留。

    18、浮动元素引起的问题

    • 父元素的高度无法被撑开,影响与父元素同级的元素
    • 与浮动元素同级的非浮动元素会跟随其后
    • 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构

    19、什么是FOUC(无样式内容闪烁)?你如何来避免FOUC?

    如果使用@import方式对CSS进行导入,会导致某些页面在windows下的IE出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象被称为文档样式短暂失效,简称FOUC

    原理:当样式表晚于结构性html加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象。

    解决方法:使用LINK标签将样式表放在文档HEAD中。

    20、line-height 三种赋值方式有何区别?(带单位、纯数字、百分比)

    带单位:px不用计算,em则会使元素以其父元素font-size值为参考来计算自己的行高;

    纯数字:把比例传递给后代,例如父级行高为1.5,子元素字体为18px,则子元素行高为1.5*18=27px;

    百分比:将计算后的值传递给后代;

    21、:link、:visited、:hover、:active 的执行顺序是怎么样的?

     :link > :visited > :hover > :active

    22、经常遇到的浏览器兼容性有哪些?如何解决?

    • 浏览器默认的 margin 和 padding 不同
    • IE6双边距bug
    • 在IE6、IE7中元素高度超出自己设置高度,原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的
    • min-height 在IE6下不起作用
    • 透明性IE用filter.Alpha(opcity=60),而其他主浏览器用opacity:0.6
    • input边框问题,去掉input边框一般用 border:none 就可以了,由于IE6在解析input样式时的bug(优先级问题),在IE6下无效

    23、有哪些方式可以对一个DOM设置它的CSS样式?

    • 外部样式表,使用 标签引入一个外部CSS样式
    • 内部样式表,将CSS代码放在
    • 内联样式,将CSS样式直接定义在HTML元素内部


    24、什么是外边距重叠?重叠的结果是什么?

    外边距重叠就是margin-collapse;

    在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式称为折叠,并且因而所结合成的外边距称为折叠外边距;

    折叠结果计算规则:

    • 两个相邻的外边距都是正数时,折叠结果是他们两者之间较大的值;
    • 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值;
    • 两个外边距一正一负时,折叠结果是两者的相加的和


    25、rgba() 和 opacity 的透明效果有什么不同?

    • opacity 作用于元素,以及元素内的所有内容的透明度,rgba()只作用于元素的颜色或其背景色
    • 设置rgba透明的元素的子元素不会继承透明效果


    26、CSS属性content有什么作用?有什么应用?

    css的content属性专门应用在 after/before 伪元素上,用于插入生成内容,可以配合自定义字体显示特殊符号。

    展开全文
  • 因为直接在需要改变位置的元素加hover属性,在触发边缘时,元素就发生向上的的位置变化,然后鼠标就和元素没有接触了,就时非hover属性,元素位置要还原,然后又接触到鼠标,变成了hover属性。如此循环就会不停闪动...
  • css 列表 hover时闪动

    2016-04-14 20:33:32
    css 列表 hover时闪动   选中事件: //企业列表增加单击事件 $('.company-name').on('click','li.enabled',function () { var $self=$(this); $('.company-name li.li-active').removeClass('li-active')....
  • 主要介绍了解决csshover做遮盖罩闪动问题的相关知识,需要的朋友可以参考下
  • 若是你的理想是成为太阳,那么就像太阳那样默默地燃烧发光,而不是像闪电那样,即便是瞬间的闪烁也要伴以震耳欲聋的雷声。 心在高处,不是自不量力、不切实际。咱们明晓得自身的能力与理想之间的差距,甚至明白咱们...
  • 解决IE6的CSS背景闪烁问题 http://www.keakon.net/2009/05/09/%E8%A7%A3%E5%86%B3IE6%E7%9A%84CSS%E8%83%8C%E6%99%AF%E9%97%AA%E7%83%81%E9%97%AE%E9%A2%98 今天遇到个奇怪的问题,网页本地测试没问题,但上传...
  • 解决csshover做遮盖罩闪动问题

    千次阅读 2017-11-23 20:13:44
    所以最开始的css代码是这样的 做完后发现出了一个问题,那就是鼠标移动到div2的时候div3会不停的闪烁。这并不是我想要的效果,于是我去找了很多资料,终于找到了原因 原来,当鼠标移动到div2的...
  • hover事件导致闪烁问题

    千次阅读 2019-11-11 15:51:26
    在拿到一个已经做了的项目来修改样式的时候,发现样式内嵌套了ivew的样式,导致hover事件出现两个问题 <div class="bottom-panel" v-if="showActiveLayerList"> <div class="title"> ...
  • 例如: CSS代码 a:hover{background:url(imagepath)} 常用的解决方案: 在页面底部添加以下IE6专用代码,让IE6缓存CSS背景图片至本地,这样a:hover时IE6就不会再重新向服务器请求加载背景图片了。 XML/HTML代码 ...
  • hover一般加载父元素上,比如一张图片上要加hover效果 可以这样: <div class='imgClass'><img src='*****' /></div> css样式这样设置: .imgClass{ width:20px; height:20px; } .imgClass ...
  • 当点击按钮的时候模态框根据动画弹出,但是按钮和模态框之间存在一直闪烁的问题,电脑上面看不出效果,手机上面闪烁效果明显,我这里是 一加 5T 手机,身边还有个 华为 P30 pro 试了下也是闪烁效果...
  • css做文字背景闪烁效果

    千次阅读 2018-11-21 16:31:44
    需要提醒进行某些操作的地方,要把那个操作做一个提醒的样式,比如高亮闪烁。 代码: &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp...
  • .content{width: 300px;height: 300px;}.test{width: 200px;height: 200px;background-color: red;}.test1:hover{display: none;...}:hover display: none 不断闪现这个影藏了不会闪现如上面的 ...
  • CSS3背景闪烁和图片缩放动画效果

    千次阅读 2014-05-05 14:44:15
    CSS3感应鼠标的背景闪烁和图片缩放动态效果 /*标题背景*/ h2{background:rgba(0,0,0,0.5);color:#FFF;padding:10px 0;width:300px;text-align:center;transition:opacity 0.5s linear 0s;} h2:hover{-moz-...
  • CSS遮罩层,顾名思义就是在div上,再“铺”一层半透明的div。在hover时,亦可进一步改变该遮罩层的色彩和透明度。...CSS遮罩层实现及hover状态丢失问题 CSS代码: .block { position: relative; top: 100...
  • CSS中,处理鼠标悬浮时切换背景,经常采用的是给元素加上“:hover”伪类,从而替换背景; 然而,当想改变背景图片时,会发现图片切换时,会有闪烁问题。 根本原因,应该是当hover事件发生时,页面才去请求切换...
  • 使用 HTML 和 CSS 实现按钮闪烁悬停效果 原视频连接 HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
  • 很多时候我们要给一些按钮或是img设置背景,而为了达到数据与...图片会闪烁甚至鼠标会出现忙的状态,而在FireFox下没有这个问题,为了解决这个问题,有两种解决办法,其一是在CSS中加入如下样式: html { fil...
  • ie6 hover 背景图闪动css解决方法

    千次阅读 2013-12-19 11:23:15
    html {   zoom: expression(function(ele){  ele.style.zoom = "1";  document.execCommand("BackgroundImageCache", false, true);  }(this)); }
  • 图片按钮/*** 做完功能以后,发现在第一次切换图片时,会发现图片有一个非常快的闪烁,这个闪烁会造成一次不佳的体验。** 产生闪烁的原因:* 背景图片是以外部资源的形式加载进网页的,浏览器每加载一个外部资源就...
  • 转换旋转会导致Chrome闪烁黑屏。它是Chrome的错误(在Safari中工作正常),或者可以使用一些聪明的CSS修复它。div {width:200px;height:200px;position:relative;background:#ddd;}span {display:inline-block;...
  • css 鼠标滑过闪烁效果

    2021-04-07 14:07:14
    } .flicker:hover:after{ transition: 1s ease; /* 放在这里 鼠标离开不会有反向的效果*/ left: 172%; } style> head> <body> <div class="flicker"> ,442429806&fm=26&fmt=auto&gp=0.jpg" alt=""> div> body> ...
  • 链接伪类(:hoverCSS背景图片有闪动BUG IE6下链接伪类(:hoverCSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存。例如:CSS代码a:hover{background:url...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,054
精华内容 1,621
关键字:

csshover闪烁