【利用CSS 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…

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

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

css hover伪类选择器与JQuery hover()方法

css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ a:active {color:#0000FF;} /* 已选中的链接 */   #art a:hover…

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

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

css -- hover伪类

CSS代码: .btn-setDefaultGateway{display: none;} .netDiv:hover span .btn-setDefaultGateway { display: inline; //移动到类为 netDiv 的 div 中,其下面的 span 标签中的 button 标签的样式设为 display:inline;(只当下对应的改变,其他的不变) } HTML代码: <div class="netDiv"> <span> <…

CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别

css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2d转换测试</title> </head> <body> <div id="fr&…

CSS中伪类及伪元素用法详解

CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试: 伪元素和伪类的区别从作用也可以看出 伪元素:伪元素是创造关于文档语言能够指定的文档树之外的抽象.例如文档语言不能提供访问元素内容第一字或者第一行的机制.伪元素允许设计师引用它们,否则这是难以办到            的.伪元素还提供样式设计师给在源文档中不存在的内容分配样式(例…

关于css中伪类及伪元素的总结

css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落的第一行"."文章首字母"之类的选择器,而这在一些出版场景里又是必须的,这一情况下出现的.引用标准中的话: CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting…

奇妙的CSS之伪类与伪元素

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

CSS的伪类和伪元素

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