伪类hover别的元素发生变化

利用CSS hover伪类改变其他元素的总结

:hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮改变样式: HTML <div id="yanshi"> 演示 </div> CSS #yanshi{ width: 100px; height: 100px; transition: background-color 0.5s,color 0.5s; text-a

【javascript/css】关于鼠标事件onmousexxx和css伪类hover

在运用鼠标移入移出事件时,一般有两种做法,一种是DOM事件的"onmouseover"和"onmouseout",还有一种是css的伪类":hover". 在实际运用中如何选择,取决于清楚明白的了解他们之间的区别. HTML DOM 允许 JavaScript 对 HTML 事件作出反应. 在我们为元素绑定了一个事件,当事件发生的时候,可以执行一段javascript代码. 关于鼠标事件,总共有: onmouseover和onmouseout 鼠

关于css伪类:hover的用法

关于伪类:hover大家都用过,也比较熟悉.今天介绍一种新的用法(不是我发现的,但是以前一直没这么用过).在Chrome浏览器下,当a标签使用display:black;时a:hover的属性浏览器就读不到.解决的方法就是在样式名后直接添加:hover属性(.hao:hover{}).我现在要说的就是样式名称后面可以直接使用:hover,不用非要在a标签内使用.鼠标悬停的效果也会显示. 如: .ss1{color:#454545;height:25px;}.ss1:hover{color:#FF

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

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

CSS3学习笔记——伪类hover

最近看到一篇文章:“Transition.Transform和Animation使用简介及应用展示” ,想看看里面 “不同缓动类效果demo”例子的效果,发现了一个问题如下: .Trans_Box :hover (冒号前空格)这个伪类只能作用于 .trans_box中的子元素,鼠标移到自身时只能激发其子元素的样式发生改变. (冒号前无空格)表示Trans_Box自身样式发生改变. <div id="hhh" class="

CSS选择器之伪类选择器（元素）

:first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元素 :last-of-type [CSS3]选择一个上级元素的最后一个同类子元素 :only-child [CSS3]选择的元素是它的父元素的唯一一个了元素(IE6-8不支持) :only-of-type [CSS3]选择一个元素是它的上级元素的唯一一个相同类型的子元素(IE6-8不支持) :nth

CSS 属性 :before && :after的用法，伪类和伪元素的区别

一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before{content:'you before'; color:red;} <div class="before"> me</div> 在这里我们给伪元素 :before 添加了属性 content,并赋值为 you before.我们来看效果: //在指定元素的内容 m

CSS 属性 - 伪类和伪元素

CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 css 无法描述的东西. 伪类种类伪元素种类区别这里用伪类 :first-child 和伪元素 :first-letter 来进行比较. p>i:first-child {color: red} <p> <i>first</i> <i>second<

CSS的伪类和伪元素

伪类 W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2). 属性描述 CSS :active 向被激活的元素添加样式. 1 :focus 向拥有键盘输入焦点的元素添加样式. 2 :hover 当鼠标悬浮在元素上方时,向元素添加样式. 1 :link 向未被访问的链接添加样式. 1 :visited 向已被访问的链接添加样式. 1 :first-child 向元素的第一个子元素添加样式. 2 :lang 向带有指定 lang 属性的元素添加样式.

【从0到1学Web前端】CSS伪类和伪元素

1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 selector.class : pseudo-class {property: value} 如以下的一段代码: a.red : visited {color: #FF0000} <a class="red" href="css_syntax.asp">CSS Syn

【CSS】伪类和伪元素选择器

伪类基于当前元素所处的状态或具有的特性,用于设置元素自身的特殊效果. a:link 规定所有未被点击的链接: a:visited 匹配多有已被点击过的链接: a:active 匹配所有鼠标按下未松开的元素: a:hover 匹配所有鼠标移入/悬停在元素上的元素: :focus 被选中的元素: :first-child 元素的第一个子元素: :lang允许创作者来定义指定元素中使用的语言: 伪类的规定: 由于css的优先级问题,下面四个伪类需要按顺序书写,否则会出现问题 L(link)

CSS中的伪类与伪元素

在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某些选择器添加特殊的效果.应用于一组 HTML 元素. 伪类的作用获取页面中不存在的信息,即通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息.一个元素可以同时设置多个伪类效果.伪类名称对大小写不敏感. 伪类有以下几种,截图引自W3School: 注: a:link /

CSS之 :before && :after的用法，伪类和伪元素的区别

一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before{content:'you before'; color:red;} <div class="before"> me</div> 在这里我们给伪元素 :before 添加了属性 content,并赋值为 you before.我们来看效果: //在指定元素的内容 m

【从0到1学Web前端】CSS伪类和伪元素分类： HTML+CSS 2015-06-02 22:29 1065人阅读评论(0) 收藏

1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 selector.class : pseudo-class {property: value} 如下面的一段代码: a.red : visited {color: #FF0000} <a class="red" href="css_syntax.asp">CSS Syn

关于伪类“:pseudo-class”和伪元素“::pseudo-element”的常见应用

伪类用于指定要选择的元素的特殊状态,向其添加特殊的效果,比如: input { width: 515px; height: 50px; padding: 10px 20px; border: 1px #fff solid; font-size: 16px; box-shadow: 0 0 21px rgba(97, 104, 124, .15); vertical-align: middle; } input:focus{ border-color: #2bb3ee; } 效果: 给input元

奇妙的CSS之伪类与伪元素

我们都知道,在CSS中有很多选择器,例如id(#), class(.),属性[attr],这些虽然可以满足一些需要,但有时候还力有未逮.伪类和伪元素就提供了一个有益的补充,可以使我们更高效编码.伪类和伪元素是预定义的.独立于文档元素的,它们不是从DOM中获取的,不是基于元素本身特征的(id,类,属性等).它们从元素的特殊状态来获取,比如元素的兄弟元素,子元素,文本元素的第一个字符等. CSS伪类: 和一般的DOM中的元素样式不一样,它并不需要任何DOM内容.只是插入了一些修饰类的元素,这些元素对

::before ::after CSS3中的伪类和伪元素

::before和::after伪元素的用法一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:focus. 常见伪元素——::first-letter,::first-line,::before,::after,::selection. ::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容. 这些添加不会出现在DOM中,不会改变文档内容,不可

CSS的伪元素和伪类

css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类—— :hover, :active, :visited, :focus. 常见伪元素——::first-letter,::first-line,::before,::after,::selection. ::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容(可以是文字,图标等,下图就是一个正方形图标,图标是通过css绘制的). 这些添加不会出现在DOM中,不会改变文档内容,不可复

css3伪类和伪元素你都懂了吗

什么是伪类? 伪类用于定义元素的特殊状态. 例如,它可用于: 当用户将鼠标悬停在元素上时为其设置样式访问和未访问的链接不同样式在获得焦点时设置元素的样式伪类的语法后代选择器匹配作为指定元素后代的所有元素.以下示例选择<div>元素内的所有<p>元素: 选择器:伪类 { 属性:值; } 链接可以以不同方式显示: /* 未访问的链接 */ a:link { color: red; } /* 已浏览过的链接 */ a:visited { color: green; } /* 鼠标

HTML+CSS教程（五）外联样式、组选择器、圆角边框、样式优先级、伪类、盒子模型、元素溢出

一.外联样式通过link标签引入外部css文件夹中的xxx.css文件到head标签中例: 二. 1.组选择器选择器名称1,选择器名称2,选择器名称3,…{属性:属性值;属性;属性值} 例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css">

伪类hover别的元素发生变化

热门专题