<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. the way to go

    推荐两本书 关于go语言的 The way to go Go语言编程高清完整版电子书.pdf

  2. golang sync.Mutex

    //go func 和主线程之间的关系是并行和竞争关系 package main import ( "fmt" "sync" "time" ...

  3. IntelliJ IDEA 启动tomcat 报错: idea Unable to open debugger port (127.0.0.1:58233): java.net.SocketException "socket closed"

    debug启动项目弹出提示 Error running omp: Unable to open debugger port (127.0.0.1:50812): java.net.SocketExce ...

  4. java 之 wait, notify, park, unpark , synchronized, Condition

    1. wait notify /** * 解释: 唤醒一个等待monitor的线程, 如果有多个线程在等待,会唤醒一个. * 一个线程在等待monitor是由Object.wait引起的 * 获取一个 ...

  5. 5. Node基础编程

      基于Chrome V8引擎 单线程 使用JavaScript开发后端代码 非阻塞的IO common规范 common一定是通过module.exports={}输出 创建Http Server ...

  6. Css 显示删除条目效果

    样式设置

  7. 计算机系统—CPU结构和内部工作

    一.计算机系统硬件组成 计算机系统的基本组成由:计算器.控制器.存储器.输入和输出设备这5大核心部件组成. 运算器和控制器等继承在一起成为CPU.以下通过这张图能够非常清楚的表达计算机系统.先从全局上 ...

  8. Des 加密cbc模式 padding

    using System; using System.Collections.Generic; using System.Linq; using System.Net.Http; using Syst ...

  9. sql for xml query sample

    sample 1: declare @x xml select @x='<ArrayOfScheduledTime> <ScheduledTime> <Recurrenc ...

  10. thinkphp模型中的获取器和修改器（根据字段名自动调用模型中的方法）

    thinkphp模型中的获取器和修改器(根据字段名自动调用模型中的方法) 一.总结 记得看下面 1.获取器的作用是在获取数据的字段值后自动进行处理 2.修改器的作用是可以在数据赋值的时候自动进行转换处 ...