示例1：

<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>

示例2：

<html>

<body>

<style>

.header-bar-search {

    width: 300px;

    height: 50px;

    font-size: 16px;

    margin-top: 100px;

    margin-left: 40%;

}

.header-bar-search input{

    display: inline-block;

    height: 50px;

    outline: 0;

    border: 1px solid #e0e0e0;

    background: #fff;

    transition: border-color .3s linear,color .3s linear,background-color .3s linear;

}

.header-bar-search .searchIput1 {

    width: 250px;

    padding: 0 10px;

    border-right: none;

}

.header-bar-search .searchIput2 {

    float: right;

    width: 50px;

    font-size: 20px;

}

.searchIput1:hover{

    border-color: #ff6700;

}

.searchIput2:hover{

    color: #fff;

    background: #ff6700;

}

.searchIput1:hover + .searchIput2{

    border-color: #ff6700;

}

</style>

<div class="header-bar-search">

    <h3>tps:请将鼠标悬浮至搜索框和按钮上</h3>

    <form action="">

        <input type="text" class="searchIput1">

        <input type="submit" value="												


											
利用css伪类选择器hover控制两个元素属性的更多相关文章
	

    
								
  1. CSS伪类选择器active模拟JavaScript点击事件
		
    一.说明 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前 ...
    
		
    2. 
						
  2. CSS伪类选择器
		
    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...
    
		
    3. 
						
  3. 关于CSS伪类选择器
		
    #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...
    
		
    4. 
						
  4. CSS伪类选择器 - nth-child(an+b):
		
    CSS伪类选择器 - nth-child(an+b): 第一种:简单数字序号写法:nth-child(number)直接匹配第number个元素.参数number必须为大于0的整数.li:nth-ch ...
    
		
    5. 
						
  5. css伪类选择器的查找顺序
		
    当伪类选择器last-child.first-child无效时,就是因为不了解css伪类选择器的查找顺序造成选中某一元素失败. 先给出一段dom <body> <div>第一个 ...
    
		
    6. 
						
  6. css伪类选择器详细解析及案例使用-----伪类选择器（1）
		
    动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的 ...
    
		
    7. 
						
  7. 如何使用CSS伪类选择器
		
    总览 CSS选择器允许你通过类型.属性.位于HTML文档中的位置来选择元素.本教程阐述了三个新选项:is().:where()和:has(). 选择器通常在样式表中使用.下面的示例会找到所有<p ...
    
		
    8. 
						
  8. css伪类选择器及伪元素选择器
		
    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
    
		
    9. 
						
  9. CSS伪类选择器和伪元素选择器
		
    CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. The problem is now the wait_for_fds() example function: it will call something like select(), poll() or the more modern epoll() and kqueue().
			
    小结: 1.线程与惊群效应 Serializing accept(), AKA Thundering Herd, AKA the Zeeg Problem — uWSGI 2.0 documentat ...
    
			
    2. 
						
  2. Eclipse添加Android library 错误的原因
			
    这两天把项目从本地转移到GIT上,本来我的Workspace是在D盘,现在因为感觉D盘不够用,就把GIT到的项目放到E盘了 按照以往的用法,GIT下来以后再往属性里添加依赖库就OK了,但是这次怎么也无 ...
    
			
    3. 
						
  3. 简单了解sshd_config配置文件
			
    OpenSSH(即常说的ssh)的常用配置文件有两个/etc/ssh/ssh_config和sshd_config.,其中ssh_config为客户端配置文件,设置与客户端相关的应用可通过此文件实现: ...
    
			
    4. 
						
  4. xcode报错: 找不到路径或者资源错误：no such file or directory
			
    报错截图: 出现的问题: 运行项目页面图片不显示. 解决方法: 1>[COMMAND+shift+G],前往文件夹,输入:  ~/Library/Developer/Xcode/DerivedD ...
    
			
    5. 
						
  5. onethink多图上传
			
    模板处理, 可以参考 checkbox 的. 注:edit 方法的 基本一样,需要先把已有的数据展示出来,绑定双击事件,删除图片 需要先绑定给已经展示出来的图片, uploadPicture 的cal ...
    
			
    6. 
						
  6. XSSer：自动化XSS漏洞检测及利用工具
			
    转载自FreeBuf.COM XSS是一种非常常见的漏洞类型,它的影响非常的广泛并且很容易的就能被检测到. 攻击者可以在未经验证的情况下,将不受信任的JavaScript片段插入到你的应用程序中,然后 ...
    
			
    7. 
						
  7. 除了 UCAN 发布的鹿班和普惠体，这些设计工具也来自阿里
			
    在 4 月 27 日的 UCAN 2019 设计大会上,阿里巴巴对外发布了一款全新免费字体——阿里巴巴普惠体.其实,作为经济体的阿里巴巴,这些年早已默默推出了很多实用的设计工具,比如大名鼎鼎的 Ico ...
    
			
    8. 
						
  8. c语言ARP应用
			
    对于windows环境,winsock不能用来发ARP请求: 发表于: 2002-04-23 11:45:12 arp是请求硬件地址的.winsock层次太高啦... 用winsock中的sendto ...
    
			
    9. 
						
  9. mysql中的反引号``
			
    [1]反引号`,数字1左边的符号.tab键上面的符号. 它是为了区分MYSQL的保留字与普通字符而引入的符号. 不加反引号建的表不能包含MYSQL保留字,否则出错 如上图,很明显的,如果我们直接建立名 ...
    
			
    10. 
						
  10. redis集群（多机）分布
			
    一.实现原理 一致性哈希算法(Consistent Hashing): http://www.zsythink.net/archives/1182 二.配置两个redis服务,端口号要不一致 三.代码 ...
    
			
    11.