参考地址：链接

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

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <style>

     #a {color : #FFFF00;}

     #a:hover + #c{color : #00FF00;}

     #a:hover + #c > #b{color : #0000FF;}

 </style>

 <div id='a'>元素1

 </div>

 <div id='c'>元素3

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

 </div>

 </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. 粉红色界面的vscode，程序媛的必备利器

    vscode都是黑漆漆的界面,对于一个喜欢花花草草的程序媛来说,长时间对着这样的界面,简直是一种折磨啊 有的时候,也会不自觉的想要看看一些粉色的东西,毕竟有着单纯的少女心 今天看到了一篇博客,作者是自 ...

  2. Benelux Algorithm Programming Contest 2017(D)

    传送门:Problem D https://www.cnblogs.com/violet-acmer/p/9677435.html 题意: 研究人员需要使用某种细菌进行实验,给定一个序列代表接下来每个 ...

  3. Gulp小记

    安装 总的来说,玩gulp的流程是这样的: 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 ...

  4. http原理详解

    http原理详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.OSI和TCP/IP协议. 我们知道在我们计算机中的网络通信有两个模型,一个是ISO组织的OSI模型,另一个是T ...

  5. tcpdump常用参数详解

    tcpdump常用参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 好久没有更新我的博客了,看来自己最近还没有在放假中回过神来啊,哈哈~是不是也有小伙伴跟我一样呢?回归正题, ...

  6. Vue.js 基础知识

    0. Vue.js 是轻量级的MVVM框架: 1. index.html:<app></app>:组件载入:入口文件会默认调用一个 main.js: 2. App.vue:入口 ...

  7. javascript 字符串的连接和截取

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. IDA Pro使用技巧

    DA Pro基本简介 IDA加载完程序后,3个立即可见的窗口分别为IDA-View,Named,和消息输出窗口(output Window). IDA图形视图会有执行流,Yes箭头默认为绿色,No箭头 ...

  9. edge box

    先介绍一下matlab与c混合编程 主要步骤: 使用c语言编写函数 利用mexFunction()函数创建C与matlab接口 从Matlab中编译函数 # include <mex.h> ...

  10. odp.net连接方式，部署问题总结

      一. 摘要 在C#开发的过程中,经常需要操作Oracle数据库,而实际在部署程序的时候,经常要根据系统环境(32.64bit).不安装Oracle客户端等等需求,而Odp.net 也没有完美兼容的 ...