利用css伪类选择器hover控制两个元素属性
示例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控制两个元素属性的更多相关文章
- CSS伪类选择器active模拟JavaScript点击事件
一.说明 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前 ...
- CSS伪类选择器
一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...
- 关于CSS伪类选择器
#CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...
- CSS伪类选择器 - nth-child(an+b):
CSS伪类选择器 - nth-child(an+b): 第一种:简单数字序号写法:nth-child(number)直接匹配第number个元素.参数number必须为大于0的整数.li:nth-ch ...
- css伪类选择器的查找顺序
当伪类选择器last-child.first-child无效时,就是因为不了解css伪类选择器的查找顺序造成选中某一元素失败. 先给出一段dom <body> <div>第一个 ...
- css伪类选择器详细解析及案例使用-----伪类选择器(1)
动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的 ...
- 如何使用CSS伪类选择器
总览 CSS选择器允许你通过类型.属性.位于HTML文档中的位置来选择元素.本教程阐述了三个新选项:is().:where()和:has(). 选择器通常在样式表中使用.下面的示例会找到所有<p ...
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- CSS伪类选择器和伪元素选择器
CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...
随机推荐
- SQL-W3School-高级:SQL PRIMARY KEY 约束
ylbtech-SQL-W3School-高级:SQL PRIMARY KEY 约束 1.返回顶部 1. SQL PRIMARY KEY 约束 PRIMARY KEY 约束唯一标识数据库表中的每条记录 ...
- mysql密码设置为空怎么办?
由于很多童鞋安装使用MySQL时,安装时没有设置密码,或者像我一样图省事设置密码为空,想为其设置新密码: 1.点击 开始------>运行----在弹出的对话框中输入cmd 如下图: 2.使用 ...
- AutoHome项目的学习
1.自定义UITabBar #import <UIKit/UIKit.h> @interface XHQTabBarViewController : UITabBarController ...
- 【leetcode_easy】543. Diameter of Binary Tree
problem 543. Diameter of Binary Tree 题意: 转换一种角度来看,是不是其实就是根结点1的左右两个子树的深度之和呢.那么我们只要对每一个结点求出其左右子树深度之和,这 ...
- Flutter之切换导航TabBar组件
TabController 这是Tab页的控制器,用于定义Tab标签和内容页的坐标,还可配置标签页的切换动画效果等. TabController的创建有两种形式,一种是使用系统的DefaultTabC ...
- QFramework 使用指南 2020(九):Res Kit(3)异步加载 与 异步队列加载
在上一篇我们了解了 Res Kit 的一些背后设计原理,讲解了一些概念,比如:开发阶段.真机阶段等. 在这一篇,我们回到 Res Kit 使用细节上. 在 Res Kit 的第一篇,我们介绍了 Res ...
- 【MOOC课程学习记录】数据结构
看了中国大学MOOC zju的<数据结构>2019夏的第九次开课.做了一些PTA上的习题,没有全做,因为做得慢,老是不会,加上并不能做到一有空就学习,所以做不完了,给跪了Orz. 以后有时 ...
- vue8种通信方式
参考:https://juejin.im/post/5d267dcdf265da1b957081a3#heading-1(写的很详细) https://blog.csdn.net/songxiu ...
- 【AtCoder】ARC067
ARC067 C - Factors of Factorial 这个直接套公式就是,先求出来每个质因数的指数幂,然后约数个数就是 \((1 + e_{1})(1 + e_{2})(1 + e_{3}) ...
- 复合模式MVC
这里也只说一下简单的原理. Model:模型实现处理数据的切逻辑. View:视图呈现模型的数据和状态. Control:解读视图对模型的操作. 视图和模型之间使用观察者模式,只要模型的状态改变视图立 ...