hover和before一起用

2024-09-02

关于hover和after、before合用

通常hover后面跟的选择器,都是在myClass结构之下的dom元素. 如果想在myClass下添加after等,就需要两个::号. 注:after/before是属于myclass的下级元素,并不是同级 .myClass:hover::after{ content: ''; display: block; background: url(../images/category_icon/forbid_red.png) no-repeat 14px 15px; height: 30px; wi

/透明度设置的两种方式,以及hover的用法,fixed,(relative,absolute)这两个一起用/

<!DOCTYPE html> /*透明度设置的两种方式,以及hover的用法,fixed,(relative,absolute)这两个一起用*/ <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .touch:hover .content{ visibility: visible;

chrome控制台模拟hover、focus、active等状态，方便调试

有时候需要调试一个网页,需要某些元素在hover.focus.active等状态. 比如hover,鼠标放到hover上,然后去控制台中找DOM,鼠标移开的时候元素就不是hover状态了. 此时可以使用控制台来模拟hover事件. 方法:

CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式

最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧.之前做页面,css都是自己写的,所以要改哪里可以很快的找到,现在使用了UI框架,里面的样式是不可能读完的,所以就要通过调试来找到要修改的地方. 在调试CSS的时候,我们一般使用Chrome.Firefox.IE等浏览器自带的工具,快捷键都为F12.但是,我们要调试如hover的样式时,鼠标放上去才会显示,鼠标一走就看不到了,没办法看清楚css样式,还有就是浏览器自带的一些hover.foucs.acti

转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果

1.颜色小tip知识在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更亮的颜色单个颜色实现 hover 和 active 时的明暗变化效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

多行图片hover加边框兼容IE7+

问题: 遇到多行多列排列的图片时,hover上去加边框会把下面的图片挤到别处 ============================================================ 注意: IE11以下浏览器加载图片会默认给它加一个1px的边框解决方法:对图片设置border:none ============================================================= hover加边框解决方案: 原先: <li> <img /&

jQuery中多个元素的Hover事件

1.需求简介 jQuery的hover事件只是针对单个HTML元素,例如: $('#login').hover(fun2, fun2); 当鼠标进入#login元素时调用fun1函数,离开时则调用fun2函数,这种API已能够满足绝大部分需求. 不过,有些时候我们希望当鼠标进入两个或多个元素“组合的区域”时触发fun1,离开他们时触发fun2,而在这些元素间移动鼠标并不触发任何事件.例如两个元素紧挨着的HTML元素,如下图: 当鼠标进入二者的“组合区”域时触发fun1,离开时触发fun2.你也许

JS实现类似QQ好友头像hover时显示资料卡的效果

一.应用场景鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果 hover时显示二维码二.实现用如下这样一个简单的效果:鼠标hover到A上显示B来模拟有2种实现方式,推荐第二种,第一种有弊端下面会说. 1.方法一原理:把触发元素A和要显示元素B放于同一个父级元素内,鼠标经过父级元素时触发显示B.这样鼠标移动到B时仍然处于该父级元素内,则div不会隐藏. 代码: <!DOCTYPE html>

在CSS中定义a:link、a:visited、a:hover、a:active顺序

摘自:http://blog.snsgou.com/post-2.html 以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的结果我试了试,大部分都不正确. 给出我试的顺序,可能会对大家有一些帮助: A:link { color: #000000; TEXT-DECORATION: none } A:visited { COLOR: #000000; TEXT-DECORATION

Css-深入学习之单个颜色实现 hover 和 active 时的明暗变化效果

本文是作者从别的网站和文章学习了解的知识,简单做了个笔记,想要学习更多的可以参考这里:[css进阶]伪元素的妙用--单标签之美,奇思妙想 (1.normal)(2.hover)(3.active) /*建立一个带圆角矩形*/ .pesudo{ position: relative; margin-top:80px; width: 120px; height:120px; border-radius:1em; background:#00aabb; cursor:pointer; } /*用bef

css实现了hover显示title的效果

<div data-title="hello, world">hello...</div> <style> div { position: relative; } div:hover::after { content: attr(data-title); //取到data-title属性的值 display: inline-block; padding: 10px 14px; border: 1px solid #ddd; border-radius

hover 变内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

HTML案例—很讨巧的一种js+css制作hover模式展示二级菜单方法

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>利用css减少js的逻辑使用</title> <style type="text/css"> body { padding: 0; font-size: 10pt; behavior:url(css/csshover.htc); } .topmenu { displa

【经验】在CSS中定义超链接样式a:link、a:visited、a:hover、a:active的顺序

以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的结果我试了试,大部分都不正确. 给出我试的顺序,可能会对大家有一些帮助: a:link { color: #000000; text-decoration: none } a:visited { color: #000000; text-decoration: none } a:hover { color: #ff7f24; text-decoration

jQuery hover事件

hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种"保持在其中"的状态. 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数.当鼠标移出这个元素时,会触发指定的第二个函数.而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持"悬停"状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误). 参数 : over

Web页面中5种超酷的Hover效果

hover 效果能给网页增加一些动态效果,并且使得站点更具有活力.原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器的支持,我们可以用纯粹的CSS代码来实现这些有趣的效果.所谓的现代浏览器,更多的是指以Mozilla和Webkit为核心的浏览器,IE的表现稍微差强人意,所以请使用FireFox,Safari或者Chrome查看一下的效果.如下就是要介绍的5个非常酷的纯CSS hover 效果. 1. 向上跳跃 Click Here to Launch

【笔记】css hover 伪类控制其他元素

最近在模仿一个网站的项目当中有一个效果需要利用到hover效果因为不太想写jq脚本所以百度了一下css hover的运用发现原来hover也可以控制其他元素的变化的但是这有一个要求就是添加hover伪类的元素必须是被改变的元素的父类所以,看看一下代码你就会明白的了 html代码 <body> <div class="hover"> <a href="#">滑动</a> <img src="im

table 控制单双行颜色以及鼠标hover颜色 table光棒

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

用:hover伪类代替js的hover事件

制作二级菜单要实现鼠标移动上去显示子菜单,鼠标移出子菜单隐藏,或者其他类似需求的地方,首先我会想到用jquery的hover事件来实现,如: $(".nav").hover(function(){ $("sub-nav").addClass("show"); }, function(){ $("sub-nav").removeClass("show"); }); 第一个function实现鼠标移上去的样式,

鼠标hover某个元素时其属性表现Css transition 过渡效果（以宽高属性居中放大为例）

<!DOCTYPE html> <html> <head> </head> <body id="body"> <!-- /*transition过渡特效*/ 第一步:设置目标元素div2的初始样式第二步:设置目标元素div2在鼠标hover时的表现样式第三步:给目标元素添加transition属性,并指定需要过渡的属性 /*固定宽高盒子上下左右居于不定宽高容器正中*/ 第一步:设置待定位盒子和宽高值第二步:将待定位

jquery.hover()函数使用

hover和before一起用

热门专题