示例1：

  1. <html>
  2. <body>
  3. <style>
  4.     #a:hover {color : #FFFF00;}
  5.     #a:hover > #b:first-child{color : #FF0000;}
  6.     #a:hover > #b{color : #FF00FF;}
  7.     #a:hover + #c{color : #00FF00;}
  8.     #a:hover + #c > #b{color : #0000FF;}
  9. </style>
  10. <div id='a'>元素1
  11.   <div id='b'>元素2</div>
  12.   <div id='b'>元素2</div>
  13. </div>
  14. <div id='c'>元素3
  15.   <div id='b'>元素2</div>
  16. </div>
  17. </body>
  18. </html>

示例2：

  1. <html>
  2. <body>
  3. <style>
  4. .header-bar-search {
  5.     width: 300px;
  6.     height: 50px;
  7.     font-size: 16px;
  8.     margin-top: 100px;
  9.     margin-left: 40%;
  10. }
  11. .header-bar-search input{
  12.     display: inline-block;
  13.     height: 50px;
  14.     outline: 0;
  15.     border: 1px solid #e0e0e0;
  16.     background: #fff;
  17.     transition: border-color .3s linear,color .3s linear,background-color .3s linear;
  18. }
  19. .header-bar-search .searchIput1 {
  20.     width: 250px;
  21.     padding: 0 10px;
  22.     border-right: none;
  23. }
  24. .header-bar-search .searchIput2 {
  25.     float: right;
  26.     width: 50px;
  27.     font-size: 20px;
  28. }
  29. .searchIput1:hover{
  30.     border-color: #ff6700;
  31. }
  32. .searchIput2:hover{
  33.     color: #fff;
  34.     background: #ff6700;
  35. }
  36. .searchIput1:hover + .searchIput2{
  37.     border-color: #ff6700;
  38. }
  39. </style>
  40. <div class="header-bar-search">
  41.     <h3>tps:请将鼠标悬浮至搜索框和按钮上</h3>
  42.     <form action="">
  43.         <input type="text" class="searchIput1">
  44.         <input type="submit" value="												
  46. 											
    利用css伪类选择器hover控制两个元素属性的更多相关文章
    	
      1. 								
      1. CSS伪类选择器active模拟JavaScript点击事件
      1. 		
        一.说明 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前 ...
      1. 		
      4. 						
      1. CSS伪类选择器
      1. 		
        一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...
      1. 		
      7. 						
      1. 关于CSS伪类选择器
      1. 		
        #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...
      1. 		
      10. 						
      1. CSS伪类选择器 - nth-child(an+b):
      1. 		
        CSS伪类选择器 - nth-child(an+b): 第一种:简单数字序号写法:nth-child(number)直接匹配第number个元素.参数number必须为大于0的整数.li:nth-ch ...
      1. 		
      13. 						
      1. css伪类选择器的查找顺序
      1. 		
        当伪类选择器last-child.first-child无效时,就是因为不了解css伪类选择器的查找顺序造成选中某一元素失败. 先给出一段dom <body> <div>第一个 ...
      1. 		
      16. 						
      1. css伪类选择器详细解析及案例使用-----伪类选择器（1）
      1. 		
        动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的 ...
      1. 		
      19. 						
      1. 如何使用CSS伪类选择器
      1. 		
        总览 CSS选择器允许你通过类型.属性.位于HTML文档中的位置来选择元素.本教程阐述了三个新选项:is().:where()和:has(). 选择器通常在样式表中使用.下面的示例会找到所有<p ...
      1. 		
      22. 						
      1. css伪类选择器及伪元素选择器
      1. 		
        1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
      1. 		
      25. 						
      1. CSS伪类选择器和伪元素选择器
      1. 		
        CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...
      1. 		
      28. 		
    29. 	
    30.  
    31. 随机推荐
      	
        1. 									
        1. Eclipse的下载地址
        1. 			
          下载地址:http://eclipse.org/
        1. 			
        4. 						
        1. Swift加载Xib创建的Controller
        1. 			
          Xib显示如下: <注意箭头处即可> 按住Control键,点击Files'owner拖动到View即可. 加载该控制器如下: func registerClick() { let reg ...
        1. 			
        7. 						
        1. RegexBuddy 4.7.0 x64 评估试用到期，无限试用的办法
        1. 			
          http://www.cnblogs.com/inrg/p/6491043.html 最后对比发现,在注册表 HKEY_USERS 节点下存在一个用户的项,形如 "S-1-5-21-1609 ...
        1. 			
        10. 						
        1. leetcode 求一个字符串的最长回文子串
        1. 			
          最长回文子串问题:给定一个字符串,求它的最长回文子串长度.如果一个字符串正着读和反着读是一样的,那它就是回文串.   给定一个字符串,求它最长的回文子串长度,例如输入字符串'35534321',它的最 ...
        1. 			
        13. 						
        1. 集群架构03·MySQL初识，mysql8.0环境安装，mysql多实例
        1. 			
          官方网址 https://dev.mysql.com/downloads/mysql/社区版本分析 MySQL5.5:默认存储引擎改为InnoDB,提高性能和可扩展性,增加半同步复制 MySQL5.6 ...
        1. 			
        16. 						
        1. AnroidStudio gradle版本和android插件的版本依赖
        1. 			
        1. 			
        19. 						
        1. 信用卡分销系统源码、分销系统定制贴牌、信用卡三级分销系统源码、信用卡返佣系统OEM
        1. 			
          信用卡返佣分销系统贴牌,全套源码,可定制UI界面 这一整套绝对是市场上最完善最好的一套系统:里面的特色功能: 1.合伙人功能,解决你前期的资金以及资源问题 2.推广素材库,全方位增加推广效率 3.红包 ...
        1. 			
        22. 						
        1. 在Ubuntu里搭建spark环境
        1. 			
          注意:1.搭建环境:Ubuntu64位,Linux(也有Windows的,我还没空试)       2.一般的配置jdk.Scala等的路径环境是在/etc/profile里配置的,我自己搭建的时候发 ...
        1. 			
        25. 						
        1. 【并行计算与CUDA开发】英伟达硬件加速编解码
        1. 			
          硬件加速 并行计算 OpenCL OpenCL API VS SDK 英伟达硬件编解码方案 基于 OpenCL 的 API 自己写一个编解码器 使用 SDK 中的编解码接口 使用编码器对于 OpenC ...
        1. 			
        28. 						
        1. vscode自动生成文件头部注释和函数注释
        1. 			
          参考链接:https://blog.csdn.net/sueRimn/article/details/88048276
        1. 			
        31. 			
        			
      32. 							
      33.