<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. 【习题 7-6 UVA - 12113】Overlapping Squares

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 先预处理出来一个正方形. 然后每次枚举新加的正方形左上角的坐标就可以. 注意覆盖的规则,控制一下就可以. 然后暴力判断是否相同. 暴 ...

  2. linux下加入用户并赋予root权限

    1.加入用户.首先用adduser命令加入一个普通用户,命令例如以下: #adduser tommy //加入一个名为tommy的用户 #passwd tommy   //改动password Cha ...

  3. 7.3 GROUP BY的“新”功能

    7.3 GROUP BY的"新"功能正在更新内容,请稍后

  4. ImageButton-设置background跟src

    xml中添加ImageButton的background跟src <ImageButton android:id="@+id/tv3" android:layout_widt ...

  5. php图像处理（thinkphp框架有相对强大的图像处理功能）

    php图像处理(thinkphp框架有相对强大的图像处理功能) 一.总结 1.php处理图像:php处理图像需要安装外库(gd库) 2.gd库函数可以非常完美的操作图像:安装好库之后,这个库里面的函数 ...

  6. Linux在应用层读写寄存器的方法

    可以通过操作/dev/mem设备文件,以及mmap函数,将寄存器的地址映射到用户空间,直接在应用层对寄存器进行操作,示例如下: #include <stdio.h> #include &l ...

  7. .vsdc和.svf用于formal verification tools

    svf:Setup Verification for Formality

  8. Android开发之搜芽项目的图片载入问题(使用Volley进行网络图片载入)

    搜芽的移动开发这几天进度相对来说很的快. 可是美中不足的就是网络图片的载入问题. 我有两套方案: 1)沿用迅雷动漫的图片载入.迅雷动漫也是用的一个开源的库.可是不知道是我使用出了问题还是真的是它的问题 ...

  9. 芯片AMS1117 电源芯片

  10. Day3：集合

    一.集合的定义及特性 1.集合的特性 1.1   去重,把一个列表变成集合,就自动去重了 1.2   关系测试,测试两组数据之间的交集.差集等关系 #!/usr/bin/env python # -* ...