hover

a与a:link、a:visited、a:hover、a:active

由 我们两清 提交于 2020-02-10 04:47:46
原文地址http://www.cnblogs.com/exmyth/p/3226654.html a与a:link、a:visited、a:hover、a:active 起因： a与a:link的CSS代码处，忽觉茫茫然不知所以然：这a的CSS和a:link什么关系？貌似有些冲突啊？还有这a:link、 a:visited、a:hover、a:active伪类之间有没有相互制约和继承关系？ 过程： 使用软件：Adobe Dreamweaver CS3 ，Internet Explorer8.0 须知： ① 在所有浏览器中，链接的默认外观是： 未被访问的链接带有下划线而且是蓝色的 已被访问的链接带有下划线而且是紫色的 活动链接带有下划线而且是红色的 ② 在 CSS 定义中： 1. a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！ 2. a:active 必须位于 a:hover 之后，这 样才能生效！ 于是得四者顺序： a:link----->a:visited------>a:hover-------->a:active。 可以这样记： LoVe HAte（爱恨） [注意大写字母] 结果： 在CSS中， 一、若存在a{……}的定义 ①如果a:link{}也存在，那么不管a{}放到哪里，a{}和a:link{}冲突的属性都会采用a:link{}的

a:link,a:visited,a:hover,a:active

由 倖福魔咒の 提交于 2020-02-10 03:43:40
１：解释 link:连接平常的状态 visited:连接被访问过之后 hover:鼠标放到连接上的时候 active:连接被按下的时候 详细的：　 :hover版本：CSS1/CSS2　 兼容性：IE4+ NS4+ 语法： Selector : hover { sRules } 说明： 设置对象在其鼠标悬停时的样式表属性。 在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。 目前IE5.5+仅支持CSS1中的:hover。 :active版本：CSS1/CSS2　 兼容性：IE4+ 语法： Selector : active { sRules } 说明： 设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。 在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。并且:active状态可以和:link以及:visited状态同时发生。 目前IE5.5+仅支持CSS1中的:active。 :link版本：CSS1　 兼容性：IE4+ NS4+ 语法： Selector : link { sRules } 说明： 设置a对象在未被访问前的样式表属性。 IE3将:link伪类的样式表属性作用于visited伪类。

CSS--2D和3D效果

由 女生的网名这么多〃 提交于 2020-02-08 11:18:52
2D变形 转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。 变形转换 transform 移动 translate(x, y) translate ( 50px,50px ) ; 使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。 可以改变元素的位置，x、y可为负值； translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） translateX(x)仅水平方向移动（X轴移动） translateY(Y)仅垂直方向移动（Y轴移动） .box { width : 499.9999px ; height : 400px ; background : pink ; position : absolute ; left : 50% ; top : 50% ; transform : translate ( -50%,-50% ) ; /* 走的自己的一半 */ } 让定位的盒子水平居中 缩放 scale(x, y) transform : scale ( 0.8,1 ) ; 可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。 scale(X,Y

hover events are blocked when select2 dropdown is open

由 陌路散爱 提交于 2020-02-07 05:50:25
问题 When a Select2 dropdown is open, the JavaScript hover event and the css pseudoclass do not work anymore. E.g. p:hover { color: red } only has effect when the dropdown is closed and not when it's opened. See here for self contained example: http://jsfiddle.net/cre5hckw/6/ This may be related to https://github.com/ivaynberg/select2/issues/1715. I'm looking forward to any feedback! 回答1: Select2 uses a class, not :hover pseudoclass. .select2-results .select2-highlighted { color: red; } 来源： https:

jQuery实现高仿QQ音乐

由 血红的双手。 提交于 2020-02-06 03:33:29
几个实现的效果看视频吧： 动图很是不清楚 代码： html <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > music </ title > < link href = " ../jquery.mCustomScrollbar.css " rel = " stylesheet " > < link href = " ../../../img/sup.ico " rel = " icon " > < link href = " ../css/style.css " rel = " stylesheet " > < script src = " ../../../jquery-3.4.1.min.js " > </ script > < script src = " ../jquery.mCustomScrollbar.concat.min.js " > </ script > < script src = " ../js/player.js " > </ script > < script src = " ../js/index.js " > </ script > </ head > < body > < div class = " container "

sass

由 这一生的挚爱 提交于 2020-02-05 08:59:30
参考： https://www.sass.hk/guide/ 文章目录 sass快速入门 使用变量 嵌套CSS 规则 导入SASS文件 静默注释 混合器（函数+参数+默认参数） 使用选择器继承来精简CSS（函数的类） 常见问题 中文文档 特色功能 (Features) 语法格式 (Syntax) sass快速入门 大概使用情况： 变量（ $ ），混入（ @mixin ：函数+参数+默认参数），继承（ @extend ）， >精简代码 嵌套，静默注释（ // ），导入（ @import ）， >可读性更好 使用变量 把反复使用的css属性值 定义成变量； sass使用 $ 符号来标识变量； 当变量定义在css规则块内，那么该变量只能在此规则块内使用（有作用域）； 变量值也可以引用其他变量； 变量名推荐使用中划线； 声明变量： $ highlight-color : #F90 ; $ basic-border : 1px solid black ; // 多属性值 变量作用域 $nav - color : # F90 ; nav { $width : 100 px ; width : $width ; color : $nav - color ; } //编译后 nav { width : 100 px ; color : # F90 ; } 变量值也可以引用其他变量。 $

Preload Css hover Images with Javascript

由 依然范特西╮ 提交于 2020-02-04 02:58:06
Source: Preload Css hover Images with Javascript Why we need to preload css hover images? It is for the userability. Why we need to preload css hover images by Javascript? It is easy to implement and maintenance. below is the sample css class for a image button. .button { background-image : url(../images/button.jpg) ; } .button:hover { background-image : url(../images/button_ro.jpg) ; } If you did not preload "button_ro.jpg", the button will disappear for a while untill the "button_ro.jpg" is loaded, when user mouse over the button. Yes, you can hard code to preload the "button_ro.jpg" in

老徐WEB：CSS伪类和伪元素详解

由 坚强是说给别人听的谎言 提交于 2020-02-03 05:08:51
比较常见的伪类有:link、:visited、:hover等，伪元素有:before、:after等，前端开发者多多少少都有接触过，又或者用过但不知道是伪类伪元素的情况。合理正确的利用伪类、伪元素有利于减少对DOM的操作。伪类是基于当前HTML标签（元素）的操作，即作用于整个元素的操作，这是相对伪元素来说的，也是我自己方便记忆的理解。伪类又分为状态伪类和结构性伪类。状态伪类是基于当前HTML标签（元素）状态的操作，根据元素状态的变化呈现不同的样式。常见的状态伪类有： a:link 作用于未被访问过的元素； a:visited 作用于被访问过的元素。 a:hover 作用于鼠标悬停在元素上时； a:active 作用于鼠标点击时的元素； :focus 作用于拥有键盘输入焦点的元素，比如p，textarea。 input:focus { background-color:yellow; } 下面示例中用到的HTML代码如下： <div class="box"> <h1>First H1*1</h1> <h2>First H2</h2> <span>yyyy</span> <p>xxxx</p> <p class="ft">First p<span>First span*1</span><span>Second span*1<i>First i</i></span><i>First ii

关于css中hover下拉框的一个bug

由 好久不见. 提交于 2020-02-01 21:24:18
写hover下拉框的时候会遇到一个奇怪的bug，就是下拉框下来的时候会被所在位置的div遮挡，哪怕下拉框使用的absolute，也会被遮挡。 如图： 这个语言选择的下拉框会被下面的div挡住（截图是已经修复后的）。 无论是设置下拉框的z-index还是改父元素的position都无法解决。最后的解决方案是把div的z-index设置为负数。 注意，有可能div的z-index改为负数后会潜到页面的背后，导致div的内容完全被body遮挡。我建议如果遇到这种情况可以把html和body元素的z-index设为一个较小的负数如-999，这样可以保证div不会被body遮挡。 还有一种情况是div的z-index设为负数后里面的内容就无法点击了，这个问题的解决方案也可以用刚才设置父元素（如html和body）的z-index为较小值来解决。 把遮挡的div的z-index设为负数后，下拉框就不会被遮挡了。 来源： https://www.cnblogs.com/yxsrt/p/12250137.html

hover伪类

由 橙三吉。 提交于 2020-01-29 17:58:07
hover：鼠标伪类 1）、作用：鼠标移入移出的时候触发指定样式 2）、鼠标移入时，触发hover的样式；鼠标移出时，回到初始样式，整个hover中的代码，都不会被加载 3）、：后面的hover是固定写法，：前面是要添加hover伪类的目标（目标尽量不要写成标签选择器），指定的目标最好是单一的。 代码示例： 来源： CSDN 作者： 前端小布丁 链接： https://blog.csdn.net/weixin_46191548/article/details/104107148
订阅 hover