<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. 求第k大的数(用到快速排序算法的思想)

    //下面两种part效率比较:相同运算量下part比part2快5倍左右,part2写法简单但是效率低 #include "stdafx.h" #include <iostr ...

  2. String类型转Long类型需要注意的问题

    转自:https://blog.csdn.net/m819177045/article/details/52669785/

  3. Red Hat Enterprise Linux Server 5.5新增功能简介

    一.概况 昨日对刚发布的redhat新产品RHEL5.5进行了小范围的测试,红帽企业版 Linux 5.5 发行本中的亮点包括针对 Intel Boxboro-EX 平台.AMD Magny-Cour ...

  4. c#的中英文混合字符串截取

    public class StringHelper     {         public static string GetSubString(string str, int len)       ...

  5. JavaFx lineChart real-time Monitor

    JavaFx lineChart real-time Monitor   about memory public class EffectTest extends Application { Stac ...

  6. Spring源码分析专题 —— 阅读指引

    阅读源码的意义 更深入理解框架原理,印象更深刻 学习优秀的编程风格.编程技巧.设计思想 解决实际问题,如修复框架中的bug,或是参考框架源码,结合实际业务需求编写一个独有的框架 阅读源码的方法 首先是 ...

  7. postman带cookie进行请求

    接口地址: https://m.xxxx.com/api/front/activity/xs/session 打开postman的headers, 然后复制fiddler中接口的cookie,设置co ...

  8. 【习题 6-2 UVA - 712】S-Trees

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] dfs模拟一下就好. 先预处理一个dfs. 搞出来x叶子节点它的值是什么 [代码] /* 1.Shoud it use long l ...

  9. ajax的post请求与编码

    window.onload = function(){ document.getElementById('username').onblur = function(){ var name = docu ...

  10. Dcloud课程3 什么是HBuilder和MUI

    Dcloud课程3  什么是HBuilder和MUI 一.总结 一句话总结:DCloud(数字天堂)推出一款支持HTML5的Web开发IDE.最大的特点是快.MUI是高性能App的框架,也是目前最接近 ...