参考地址：链接

+表示下一级元素，>表示子元素

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.  </head>
  7.  
  8.  <style>
  9.      #a {color : #FFFF00;}
  10.  
  11.      #a:hover + #c{color : #00FF00;}
  12.      #a:hover + #c > #b{color : #0000FF;}
  13.  </style>
  14.  <div id='a'>元素1
  15.  
  16.  </div>
  17.  <div id='c'>元素3
  18.      <div id='b'>元素2</div>
  19.  </div>
  20.  
  21.  </html>

css之hover改变子元素和其他元素样式的更多相关文章

  1. jQuery的hover方法搭配css的hover选择器，实现选中元素突出显示

    问题简述: 今天做帮一个师姐做网页遇到一个这样的要求: 鼠标不移动进表格,表格透明度不变. 鼠标移动进表格,hover到的单元格透明度不变,没hover到的单元格透明度改变. 先贴我已经实现好的效果, ...

  2. css小记：hover 鼠标滑过让该元素的子元素或者其他元素改变样式

    <!DOCTYPE><head><meta http-equiv="Content-Type" content="text/html; ch ...

  3. 响应式移动端去除css的hover和jq的hover还有input在苹果下的默认样式

    去除css的hover: /*直接给body添加ontouchstart*/ <body ontouchstart> 去除jq的hover: var winW01 = $(window). ...

  4. JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器

    今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别 在 dom    想用jquery  必须先引入(顺序问题)        先css 再js:   ...

  5. CSS魔法堂：一起玩透伪元素和Content属性

    前言  继上篇<CSS魔法堂:稍稍深入伪类选择器>记录完伪类后,我自然而然要向伪元素伸出"魔掌"的啦^_^.本文讲讲述伪元素以及功能强大的Contet属性,让我们可以通 ...

  6. 如何在Vue中，当鼠标hover上元素时,给元素加遮罩层

    介绍 当鼠标hover 上元素时,给元素加一层遮罩层. 效果图 使用 import VueHoverMask from 'vue-hover-mask' export default { compon ...

  7. 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

    × 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...

  8. CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式

    转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http:/ ...

  9. css设置时父元素随子元素margin值移动

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div ...

随机推荐

  1. pascal,c,c++使用大于2^32整型的注意要点

    如果在你的电脑出现以下这种现象,则说明这篇文章适合你,否则不必理会. 适用于取余 比如求n!除以1000000007(被除数较大)的余数. pascal: pascal输出不需要说明格式,而若式子运算 ...

  2. STM32 --- 什么时候打开复用IO的时钟（比如RCC_APB2Periph_AFIO）

    需要用到外设的重映射功能时才需要使能AFIO的时钟,包括外部中断. 外部中断(EXTI)中与AFIO有关的寄存器是AFIO-EXTICR1.2.3,它们是用来选择EXTIx外部中断的输入脚之用. 举例 ...

  3. C# WinForm文章收集

    DataGridView 使用方法集锦 https://blog.csdn.net/zhaoyu_m69/article/details/70307934 关于DataGridView的一些操作(很全 ...

  4. 2范数和F范数的区别

    2范数和F范数是不同的. 2范数表示矩阵或向量的最大奇异值,max⁡(svd(X)) 而 F范数表示矩阵所有元素平方和的开方根 sqrt(∑_(x_(i,j∈X))▒x_(i,j)^2 )

  5. 监听INPUT值的即时变化

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 如何下载网易云音乐APP里的MV和短视频?

    本人:网易云音乐死粉,朋友圈大多都用的是云音乐,因为推荐功能牛逼 然后:发现云音乐APP里越来越多吸引我的短视频,经常看到好的就想保存到相册,然后微信发给朋友 但是:不知道怎么下载网易云音乐的短视频, ...

  7. Hbase记录-Hbase调优参数

  8. C++函数返回局部变量

    函数不能返回指向栈内存的指针 原因:返回值是拷贝值,局部变量的作用域为函数内部,函数执行结束,栈上的局部变量会销毁,内存释放. 可返回的局部变量: 1. 返回局部变量本身 int sum(int a, ...

  9. Linux - 日志处理一

    Linux 日志处理 history # 历时命令默认1000条 HISTTIMEFORMAT="%Y-%m-%d %H:%M:%S " # 让history命令显示具体时间 hi ...

  10. matplotlib-2D绘图库

    安装  python -m pip install matplotlib  允许中文: 使用matplotlib的字体管理器指定字体文件 plt.rcParams['font.sans-serif'] ...