<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'>元素1

  <div id='b'>元素2</div>

  <div id='b'>元素2</div>

</div>

<div id='c'>元素3

  <div id='b'>元素2</div>

</div>

</body>

</html>

css hover控制其他元素的更多相关文章

  1. 通过父元素的hover控制子元素的显示

    .searbar_content_box:hover .searchBar_checked_detail_box{ display:block}

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

    最近在模仿一个网站的项目 当中有一个效果需要利用到hover效果因为不太想写jq脚本所以百度了一下css hover的运用发现原来hover也可以控制其他元素的变化的 但是这有一个要求 就是添加hov ...

  3. 在css中使用hover来控制其他元素的样式，该两个元素必须是父子元素

    .col-3:hover .check-box { display: block; } 在css中使用hover来控制其他元素的样式,该两个元素必须是父子元素!!!!

  4. 如何在CSS中映射的鼠标位置，并实现通过鼠标移动控制页面元素效果

    映射鼠标位置或实现拖拽效果,我们可以在 JavaScript 中做到这一点.但实际上,在CSS中有更加简洁的方法,我们可以在不使用JavaScript 的情况下,仍然可以实现相同的功能! 只使用CSS ...

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

    :hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮 ...

  6. css:hover状态改变另一个元素样式的使用

    效果演示 css:hover状态改变另一个元素样式的使用 .box { width: 150px; height: 150px; background-color: #069; line-height ...

  7. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  8. 用一个例子学习CSS的伪类元素

    CSS伪类元素是一个非常酷的东西!首先我们理解一下它,:before :after 伪类元素,也就是虚假的元素.它可以插入在元素的前面或者后面,而在HTML文档结构中,它却是不存在的,因为Js是无法通 ...

  9. CSS :befor :after 伪元素的妙用

    本篇重点介绍CSS中的:befor.:after创建的伪元素几种使用场景,如填充文本.作为iconfont.进度线.时间线以及几何图形. 1. 介绍 1.1 说明 CSS中的:befor.:after ...

随机推荐

  1. 没有killall命令的解决方法

    没有killall命令的解决方法 -bash: killall: command not found https://www.byte128.com/archives/231.html 执行killa ...

  2. try {}里有一个return语句 finally执行顺序

    先看例子 package example; class Demo{ public static void main(String args[]) { int x=1; System.out.print ...

  3. js上传文件（图片）的格式和大小限制

    如果你想快速解决这个问题,看本文就够了.查了好多资料,终于解决了,太耗时间了,本文留给给后来者,希望你们工作的更轻松 本文保存为.html文件用浏览器打开即可测试功能 <form id=&quo ...

  4. IOS开发UI基础--数据刷新

    IOS开发UI基础--数据刷新 cell的数据刷新包括下面几个方面 加入数据 删除数据 更改数据 全局刷新方法(最经常使用) [self.tableView reloadData]; // 屏幕上的全 ...

  5. C#string转换为Datetime

    DateTime.ParseExact("0710090000", "MMddHHmmss", CultureInfo.CurrentCulture, Date ...

  6. HTML基础第八讲---序列卷标

    转自:https://i.cnblogs.com/posts?categoryid=1121494 什么叫做序列卷标?其实,这是一个大家都蛮熟悉的东西,只是在网页中换个名称来称呼罢了,序列卷标的功能在 ...

  7. Apache/Tomcat/JBOSS/Nginx区别（转）

    先说Apache和Tomcat的区别: Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一. ...

  8. 理解spring对事务的处理：传播性

    所谓事务传播行为就是多个事务方法相互调用时,事务如何在这些方法间传播.Spring 支持 7 种事务传播行为: PROPAGATION_REQUIRED 如果当前没有事务,就新建一个事务,如果已经存在 ...

  9. 【干货】前端开发者最常用的六款IDE

    一.Visual Studio Code 下载地址:https://code.visualstudio.com/ 功能介绍: 微软在2015年4月30日Build 开发者大会上正式宣布了 Visual ...

  10. ArcGIS 10.5 新功能

    ArcGIS 10.5正式发布,打造智能的Web GIS平台 2017年新年来临之际,ArcGIS 10.5正式发布. 历经几个版本,ArcGIS10.5已经革新为一个智能的以Web为中心的地理平台, ...