hover | 易学教程

深入理解CSS伪类

阅读更多关于深入理解CSS伪类

伪类经常与伪元素混淆，[伪元素]的效果类似于通过添加一个实际的元素才能达到，而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。本文将详细介绍伪类的详细知识锚点关于锚点 <a> ，有常见的5个伪类，分别是:link、:hover、:active、:focus、:visited a:link{background-color:pink;}/*品红，未访问*/ a:hover{background-color:lightblue;}/*浅蓝，鼠标悬停*/ a:active{background-color:lightgreen;}/*浅绿，正被点击*/ a:focus{background-color:lightgrey;}/*浅灰，拥有焦点*/ a:visited{color:orange;}/*字体颜色为橙色，已被访问*/ /*注意:visited伪类只能设置字体颜色、边框颜色、outline颜色的样式*/ 伪类顺序对于伪类顺序，有一个口诀是love-hate，代表着伪类的顺序是link、visited、focus、hover、active。但是否伪类的顺序只能如此呢？为什么是这个顺序呢？ CSS层叠中有一条法则十分重要，就是后面覆盖前面，所以伪类的顺序是需要精心考虑的。【1

#menu ul li:hover ul

阅读更多关于 #menu ul li:hover ul

#menu ul li:hover ul这个样比较难理解，它的意思是定义当鼠标划过#menu下ul下li时，li下的ul的样式（有点饶舌），这里设置为display:block，意思是鼠标划过时显示这块内容。开始隐藏，鼠标划过时显示，这就实现了我们想要的效果。目前IE6只支持a的伪类，其它标签的伪类不支持，所以要想在IE6下也显示正确，需要借助js来实现。我们定义一个类.sfhover（自己命名，需和JS中相同www.99buyecheng.com）的属性为display:block;然后当鼠标划过后，用JS给当前li添加上这个样式上，根据css的优先级：指定的高于继承的原则，就实现了IE6下的正确显示。 http://www.zhuqiaodou.com/forum.php?mod=forumdisplay&fid=55 来源： https://www.cnblogs.com/huangqi/archive/2013/01/31/2887366.html

导航鼠标悬浮时底部边框从中间往两边移动效果

阅读更多关于导航鼠标悬浮时底部边框从中间往两边移动效果

经常看到这种效果，就研究了下。 <a href='' class='tag'>测试一下吧</a> .tag { text-decoration:none; position:relative; padding:10px } .tag:after{ content:''; position:absolute } .tag:after { border-bottom:2px solid #333; left:51%; right:51%; bottom:0px; transition: all .2s; } .tag:hover:after { left:0%; right:0% } 来源： https://www.cnblogs.com/chenxingbo/p/12227976.html

翻书折纸特效

阅读更多关于翻书折纸特效

这个特效大家可以自己去改变其中的值去看看有什么变化，原理起始我也不是很懂，只知道用效果展示： hover前： <style> .page{ background: pink; width: 120px; height: 120px; } .content { width: 120px; height: 120px; margin: 40px auto 0; position: relative; cursor: pointer; } .content:before { content: ''; position: absolute; top: 0; right: 0; border: 0px solid; border-color: rgba(0, 0, 0, 0.2) #fff ; transition: border .5s ease; } .content:hover:before { border-right-width: 50px; border-bottom-width: 50px; } </style> </head> <body> <div class="content" id="content"> <div class="page"></div> </div> </body> </html> 来源： CSDN 作者：前端小峰链接： https://blog

如何使用CSS创建巧妙的动画提示框

阅读更多关于如何使用CSS创建巧妙的动画提示框

原文： https://webdesign.tutsplus.co... 原作： Jase Smith 翻译： Stypstive 当你的用户需要漂亮的图标给出额外的文字信息时，亦或是当他们在点击了按钮之后需要确认自己没点错时，又或是带图片和字幕的复活节彩蛋，提示框是用来增强用户界面的绝佳手段。现在，让我们来做几个动画提示框，没有别的，只有HTML和CSS。样例这是我们之后要做的： http://jsfiddle.net/kcschaefe... 在我们沉浸在写代码的过程中之前，让我们先来看看我们的意图是什么。主要目的是为了获得一种简单的添加提示框的方法，这样一来，我们之后就能够通过增加一个自定义的 tooltip 属性来做到这一点。 <span tooltip="message">visible text or icon, etc.</span> 关于可访问性和功能的记注如果你在寻找兼容508的提示框，或者需要带容器冲突侦测和/或HTML内容 vs 纯文本的智能提示框，有许多实用第三方脚本的解决方案能满足你的要求。 "用JavaScript来做完全可访问的交互组件是命令式的" - Sara Soueidan, 打造一个完全可访问的帮助提示框...比你想的要难这篇教程不会特地解决可访问性的需求。你了解你的用户，知道他们需要什么，所以有关这方面，也要记得考虑他们的需求。

Web图片资源的加载与渲染时机

阅读更多关于 Web图片资源的加载与渲染时机

此文研究页面中的图片资源的加载和渲染时机，使得我们能更好的管理图片资源，避免不必要的流量和提高用户体验。浏览器的工作流程要研究图片资源的加载和渲染，我们先要了解浏览器的工作原理。以 Webkit 引擎的工作流程为例：从上图可看出，浏览器加载一个HTML页面后进行如下操作：解析HTML —> 构建DOM树加载样式 —> 解析样式 —> 构建样式规则树加载javascript —> 执行javascript代码把DOM树和样式规则树匹配构建渲染树计算元素位置进行布局绘制从上图我们不能很直观的看出图片资源从什么时候开始加载，下图标出图片加载和渲染的时机：解析HTML【遇到 <img> 标签加载图片】 —> 构建DOM树加载样式 —> 解析样式【遇到背景图片链接不加载】 —> 构建样式规则树加载javascript —> 执行javascript代码把DOM树和样式规则树匹配构建渲染树【遍历DOM树时加载对应样式规则上的背景图片】计算元素位置进行布局绘制【开始渲染图片】图片加载与渲染规则页面中不是所有的 <img> 标签图片和样式表背景图片都会加载。 display:none <style> .img-purple { background-image: url(../image/purple.png); } </style> <img src="..

来自微软的纯CSS下拉菜单

阅读更多关于来自微软的纯CSS下拉菜单

摘自： http://www.cnblogs.com/dvbhack/archive/2009/04/17/best-practices-of-css-dropdown-menu.htm 来自微软的纯CSS下拉菜单结合JavaScript的下拉菜单，纯CSS的下拉菜单我也写过很多了。不过在微软 Microsoft Expression Web 的相关站点上看到这个纯CSS下拉菜单的时候，我还是觉得很赞赏。这应该是最精简、最干净的纯CSS下拉菜单了。先看一下效果（这是我重新实现的）：下面是实现方法：首先是菜单的XHTML代码： <ul> <li><a href="#">菜单一</a></li> <li><a href="#">菜单二</a> <ul> <li><a href="#">子菜单一</a></li> <li><a href="#">子菜单二</a></li> <li><a href="#">子菜单三</a></li> </ul> </li> <li><a href="#">菜单三</a></li> <li><a href="#">菜单四</a> <ul> <li><a href="#">子菜单一</a></li> <li><a href="#">子菜单二</a></li> <li><a href="#">子菜单三</a></li> </ul> </li> <li>

CSS 阴影动画优化技巧

阅读更多关于 CSS 阴影动画优化技巧

box-shaodw 在我们的工作中使用以及越来越多，伴随阴影的动画或多或少都有一点。假设，我们有下面这样一个盒子： div { width: 100px; height: 100px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } 希望 hover 的时候，盒阴影从 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) 过渡到 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3)。 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) --> box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) OK，最简单的方法当然是： div:hover { width: 100px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）因为过渡动画是在两个不同的盒阴影状态在发生，所以在过渡动画的时间内，浏览器会不断的重绘盒阴影。而又由于阴影属于耗性能样式，所以这种动画给人的感觉多少有些卡顿。这里有一个小技巧可以优化这种情况下的阴影动画。

Add Class on ready, remove class on hover

阅读更多关于 Add Class on ready, remove class on hover

问题 I'm creating my portfolio website. I'm looking to add class on document ready, and remove/change that class to a different class on hover. I'm using lightgallery & CSS gram filters to my images on load and hover. $(document).ready(function() { $("#gallery li a").load(function(){ $($(this).find("img")[0]).addClass("inkwell"); }); $("#gallery li a").hover(function(){ $($(this).find("img")[0]).removeClass("inkwell").addClass("mayfair"); }); }); the jQuery code above didn't seem to work well.

Conditionally style an element based on whether it contains a particular child element?

阅读更多关于 Conditionally style an element based on whether it contains a particular child element?

问题 This is in reference to a nav menu on a site I am working on: I have applied a hover style to these particular anchors (subnav buttons): ul#css3menu ul li:hover>a { Now I want to further style any of these anchors that have a child span element. How could I code that? I have it somewhat working by applying the style to the span element: ul#css3menu ul span:hover{ The problem with this is the style is only applied when hovering over the span element's space rather than while hovering over the

订阅 hover