hover要用在哪里 class还是id

2024-11-04

CSS :hover伪类选择定义和用法

伪类选择符E:hover的定义和用法: 设置元素在其鼠标悬停时的样式.E元素可以通过其他选择器进行选择,比如使用类选择符.id选择符.类型选择符等等.特别说明:IE6并非不支持此选择符,但能够支持a元素的:hover ,也就是只支持通过类型选择符选择的a元素的:hover . 语法结构: E:hover{ Rules } 浏览器支持: IE浏览器支持此选择符.火狐浏览器支持此选择符.谷歌浏览器支持此选择符.opera浏览器支持此选择符. 实例代码: <!DOCTYPE html> <ht

css之hover改变子元素和其他元素样式

参考地址:链接 +表示下一级元素,>表示子元素 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> #a {color : #FFFF00;} #a:hover + #c{color : #00FF00;} #a:hover +

css hover控制其他元素

<html> <body> <style> #a:hover {color : #FFFF00;} #a:hover > #b:first-child{color : #FF0000;} #a:hover > #b{color : #FF00FF;} #a:hover + #c{color : #00FF00;} #a:hover + #c > #b{color : #0000FF;} </style> <div id='a'>

利用css伪类选择器hover控制两个元素属性

示例1: <html> <body> <style> #a:hover {color : #FFFF00;} #a:hover > #b:first-child{color : #FF0000;} #a:hover > #b{color : #FF00FF;} #a:hover + #c{color : #00FF00;} #a:hover + #c > #b{color : #0000FF;} </style> <div id='a

JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题

1.鼠标进入容器方向的判定判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种比较方便的方法: 第一种方法,利用圆和反正切三角函数如下图所示: 以div容器的中心点作为圆心,以高和宽的最小值作为直径画圆,将圆以[π/4,3π/4),[3π/4,5π/4),[5π/4,7π/4),[-π/4,π/4)划分为四个象限. 代码如下: $(".box").on("

JavaScript学习笔记(四)——jQuery插件开发与发布

jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用,在jQuery官网有许多插件: 一.插件开发基础 1.1.$.extend 在jQuery根命名空间下直接调用的方法可以认为是jQuery的静态方法或属性,常常使用$.方法名来调用,使用$.extend这个静态方法可以完成两个功能: 1.1.1.扩展属性或方法给jQuery 比如我们想给jQuery

Node.js：DNS模块的使用

Nodejs的DNS模块包涵有关DNS查询和操作的方法,下面介绍该模块的基本用法以及实现一个DNS查询小工具. 1.获取DNS服务器地址使用getServers方法,该方法返回一个IP地址组成的数组,如下所示: const dns = require('dns'); const servers = dns.getServers(); console.log(servers); 返回结果为: [ '114.114.114.114', '8.8.8.8', 'fec0:0:0:ffff::1',

webform Repeater重复器、地址栏传值、Response

Repeater: 重复器 <HeaderTemplate></HeaderTemplate> - 头模板:在循环开始时,其内容只会打印一遍 <ItemTemplate></ItemTemplate> - 项模板:重复循环打印其内容 <AlternatingItemTemplate></AlternatingItemTemplate> - 交替模板:与项模板交替打印 <FooterTemplate></FooterT

js实现一个简单计算器

代码如下,仅支持webkit <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>calc</title> <style type="text/css"> *{ padding:0; margin:1px; } #calculater{ margin: auto; margin-top: 30px; border: s

Tween公式以及四个参数

Tween的主页在这里:http://createjs.com/tweenjs , 这里边还有挺多开源项目的: Tween公式 4个参数 t:current time(当前时间) b:beginning value(初始值) c: change in value(变化量) d:duration(持续时间) return (目标点) var Tween = { linear: function (t, b, c, d){ //匀速 return c*t/d + b; }, easeIn: func

转载请注明出处: https://github.com/qiu-deqing/FE-interview

转载请注明出处: https://github.com/qiu-deqing/FE-interview Table of Contents generated with DocToc FE-interview $HTML, HTTP,web综合问题常见排序算法的时间复杂度,空间复杂度前端需要注意哪些SEO web开发中会话跟踪的方法有哪些 <img>的title和alt有什么区别 doctype是什么,举例常见doctype及特点 HTML全局属性(global attribute)有哪些

webform Repeater、地址栏传值、Response

Repeater: 重复器 Repeater中有五个模板,这里需要注意的是4个 <HeaderTemplate> - 开头,只执行一次的内容 <ItemTemplate> - 需要重复执行的部分 <AlternatingItemTemplate> - 需要与上面模板进行交替执行的部分 <FooterTemplate> - 尾部,只执行一次,在重复的部分执行完之后再执行例:展示数据库中的数据 <%@ Page Language="C#&quo

CSS样式，雪碧，图片替换，渐变小析

Css基础2: 相对长度单位:em,rem,px,%绝对长度单位:厘米等(不用)颜色单位:rgb,rgb的百分比,16进制(#),颜色名称字体:font-size:为了更好适合点阵,尽量使用偶数font-family:字体font-weight:字体粗细100-900,400=normal,700=bold,900=最粗font-style:italic,oblique(字体变斜)text-indent:文字缩进letter-spacing:字间距(英文单个字符,或者汉字之间都有效)word-s

JS Div滚动，下拉框添加属性，年月日下拉条

创建某一下拉菜单的项: str = str+"<option value='"+i+"'>"+i+"</option>"; 提取从i到j之间的字符串: kd.substr(i,j) right的第i个子节点的内容: right.childNodes.item(i) 实例 Div滚动: <style type="text/css"> *{ margin:0px auto; padding:0p

【小贴士】关于transitionEnd/animate的一个有趣故事

前言在很久之前,我们项目有一个动画功能,功能本身很简单,便是典型的右进左出,并且带动画功能以当时来说,虽然很简单,但是受限于框架本身的难度,就直接使用了CSS3的方式完成了功能当时主要使用transform与animation实现功能,并且用了一个settimeout执行回调,然后此事便不了了之了但是出来混总是要还的,这不,最近相似的东西又提了出来,我们当然可以将原来的那套东西拿来用,但是看着那个settimeout总是不是滋味,因为这样捕捉回调的效果以及可能引起的BUG大家都懂,于是就

CSS3系列之3D制作

一.序博主最近这些天,突发奇想的想研究一下CSS3的东西,从而提升一下CSS的能力,在学习的过程中发现其实CSS3是一个挺复杂的东西,深入的研究,你可能会涉及到初中的光学理论来帮助理解一些概念,同时如matrix可能还需要你用大学学习的矩阵来进行分析,因为这是本系列的第一篇文章,所以就从最好玩的开始介绍起,这样也不至于让大家失去了阅读下去的兴趣,同时写这些文章的一个主要的原因是,CSS3挺复杂的,一方面整理一下自己的研究,方便日后重新的翻看,另一方面,也想帮助更多的读者而来进入CSS3这个世界

CSS3中的动画功能（一）

css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法.transitions用法:transition: property duration timing-function其中property表示对哪个属性进行平滑过渡,duration表示在多长时间内完成属性值的平滑过渡,timing-function表示通过什么方法来进行平滑过渡其中包括:linea

display的理解

display可把框内显示的内容改变(自我理解) none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-block 行内块元素.(CSS2.1 新增的值) list-item 此元素会作为列表显示. run-in 此元素会根据上下文作为块级元素或内联元素显示. compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除. marker C

H5图像遮罩-遁地龙卷风

(-1)写在前面这个idea不是我的,向这位前辈致敬.我用的是chrome49.用到的图片资源在我的百度云盘里http://yun.baidu.com/share/link?shareid=1970396223&uk=1302053889 代码不能运行,说明你的浏览器版本不够高,加上对应浏览器前缀,还不行,浏览器不支持. 这个案例给了我很大启迪,从分析案例使用了什么属性.在到如何实现,最后还是看了源代码才做到一模一样. (1)知识预备 a.transform-origin transform-

右下角浮窗&动画效果

2015-07-17 11:07:57 CSS #goreg { width: 70px; position: fixed; bottom: 20px; right: 25px; ; opacity:0.4; text-align: center; } #goreg a { text-decoration:none; width: 70px; height: 70px; display: inline-block; background-color: #e0e4e5; padding-top:

JS练习题

1.带参数的函数不能重复调用 2.顺序语句: 3.在重复调用中打断调用用 return 例如: Interval 时间间隔先清一下再接着 return:其他的调用也可以加return打断 4.未添加的属性 :m.getAttribute("ss")==null 用于循环中得判断 5. 字符串用双引号 m.style.left=qq+"px"; 有时候必须写成这种方式 400+px: 6.有时候用汉语输入法输入后不报

hover要用在哪里 class还是id

热门专题