示例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. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_16-CMS前端工程创建-导入系统管理前端工程
			
    提供了基于脚手架封装好的前端工程 H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\阶段5 3.微服务项目[学成在线]·\day02 CMS前端开发\资料\xc-ui-p ...
    
			
    2. 
						
  2. linux简单命令8---用户登录查看命令
			
    ---------------------------------------------------------------------------------------------------- ...
    
			
    3. 
						
  3. 轻量级通用上采样算子-CARAFE
			
    转载:https://zhuanlan.zhihu.com/p/76063768 前言 这篇论文被 ICCV 2019 接收为 oral presentation.之前我们主要研究物体检测(例如 Hy ...
    
			
    4. 
						
  4. PAT 甲级 1023 Have Fun with Numbers (20 分)（permutation是全排列题目没读懂）
			
    1023 Have Fun with Numbers (20 分)   Notice that the number 123456789 is a 9-digit number consisting  ...
    
			
    5. 
						
  5. WINDOWS命令行关闭本地占用的端口
			
    1.查找对应的端口占用的进程:netstat  -aon|findstr  "8060"    ,找到占用8060端口对应的程序的PID号: netstat  -aon|finds ...
    
			
    6. 
						
  6. 双目结构光三维扫描仪获得的三维点云模型（GIF）
			
    
			
    7. 
						
  7. JAVA数据结构和算法 6 递归
			
    递归:直接或者间接地调用自己.比如计算连续数的阶乘,计算规律:n!=(n-1)!*n. 每个递归方法都有一个基值(终止)条件,以防止无线地递归下去,以及由此引发的程序崩溃. 采用递归是因为它可以从概念 ...
    
			
    8. 
						
  8. 机器学习笔记——k-近邻算法（一）简单代码
			
    一 import numpy as np ##初始化数据 T = [[3, 104, -1], [2, 100, -1], [1, 81, -1], [101, 10, 1], [99, 5, 1], ...
    
			
    9. 
						
  9. spring使用注解的方式创建bean ，将组件加入容器中
			
    第一种使用@Bean的方式 1.创建一个bean package com.springbean; public class Person { private String name; private  ...
    
			
    10. 
						
  10. CMake速记
			
    目录 CMake速记 我的demo 外部构建 基础语法 常用指令 环境变量 一些变量 参考文档 title: CMake速记 date: 2019/11/18 19:17:40 toc: true - ...
    
			
    11.