CSS hover 改变另外一个元素状态
Part.1 问题
我们写页面时也不少遇到这个问题,在没有使用任何预处理语言前提下,当 hover 一个元素的时候怎么改变其它的元素?
这里我把它分为两种情况(除自身以外)
hover 时
1: 改变本身的子元素
2: 改变本身元素的兄弟元素
Part.2 解决
第一种情况最常见也相对好解决:
现在我们假设 class1 为父级元素, class2 为它的子级元素
HTML
<div class="class1">
<div class="class2"></div>
</div>
CSS
.class1 {
width: 300px;
height: 300px;
margin: 200px auto;
border: 1px solid red
}
.class2 {
width: 150px;
height: 150px;
float: right;
border: 1px solid black
}
.class1:hover .class2{
background: yellow
}
效果:
第二种情况不是很常见:
现在我们假设 class1丶class2 为兄弟元素,这里会用到 CSS3 的兄弟选择器
HTML
<div class="class1"></div>
<div class="class2"></div>
CSS
.class1 {
width: 300px;
height: 300px;
margin: 200px auto 0;
border: 1px solid red
}
.class2 {
width: 150px;
height: 150px;
margin: auto;
border: 1px solid black
}
.class1:hover + .class2{
background: yellow
}
效果:
CSS hover 改变另外一个元素状态的更多相关文章
- hover 改变另一个标签的属性
- css:hover状态改变另一个元素样式的使用
效果演示 css:hover状态改变另一个元素样式的使用 .box { width: 150px; height: 150px; background-color: #069; line-height ...
- 利用CSS hover伪类改变其他元素的总结
:hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮 ...
- css控制一个元素点击后, 改变另外一个元素的状态
1.点击后改变子元素.myclass:active span{ color:#00f;} 此方式在ios下不生效,chrome下正常 2.改变下一个兄弟元素.myclass:active +span ...
- 【笔记】css hover 伪类控制其他元素
最近在模仿一个网站的项目 当中有一个效果需要利用到hover效果因为不太想写jq脚本所以百度了一下css hover的运用发现原来hover也可以控制其他元素的变化的 但是这有一个要求 就是添加hov ...
- 10个CSS+HOVER 的创意按钮
CSS hover 样式很简单,但是想创造出有意思.实用.有创意性的特效是很考验设计师的创意能力,所以设计达人每隔一段时间都会分享一些与鼠标点击.悬停的相关特效,以便大家获得更好的创造灵感. 今天我们 ...
- 用 CSS Grid 布局制作一个响应式柱状图
最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...
- 12小时包你学会基于ReactMix框架的ReactNativeApp开发(二)基于Css+HTML写第一个app页面
上一篇文章,大家对于ReactMix(https://github.com/xueduany/react-mix)框架有了一个基本认识,知道我们是一个语法糖,帮助大家基于一套代码,所有平台都能跑.那么 ...
- DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
随机推荐
- EF1:MVC/EF(Entity Framewok) /First Migrations
1. 概念 Entity Framework: ADO.NET Entity Framework 是微软以 ADO.NET 为基础所发展出来的对象关系对应 (O/R Mapping) 解决方案.(此处 ...
- CAAnimation
序言 CAAnimation是一个抽象类,遵循了CAMediaTiming协议和CAAction协议!我们不要直接使用CAAnimation类,而是使用其子类: CATransition:提供渐变效果 ...
- 【Bitset】 BZOJ4810
难得学习一下C++的库..[至今连map,vector都没用过的我.. 首先#include<bitset>或<bits/stdc++.h> 定义函数: { bitset & ...
- lua 与C通过c api传递table
此文转自http://blog.csdn.net/perfect2011/article/details/19200511(感谢...) 首先了解下c++与lua之间的通信: 假设在一个lua文件中有 ...
- ava Double: 四舍五入并设置小数点位数
public static void main(String[] args) { // 1. 先乘后四舍五入, 再除; double d = 62.31060027198647; double d2 ...
- 第四代增强 NEW BADI的定义及实现
NEW BADI 是在第四代增强框架下创建的BADI,是相对于第三代增强Classic Badi 而言的. 根据第四代增强的基本概念,所有显式增强Enhancement options 都必须放在增强 ...
- bind: Invalid argument
出现此问题在于,listen函数在socket函数和bind函数之间. 例: /*客户端程序开始建立sockfd描述符*/ listenfd = socket(AF_INET,SOCK_STREAM, ...
- 《Windows核心编程系列》十一谈谈Windows线程池
Windows线程池 上一篇博文我们介绍了IO完成端口.得知IO完成端口可以非常智能的分派线程.但是IO完成端口仅对等待它的线程进行分派,创建和销毁线程的工作仍然需要我们自己来做. 我们自己也可以创建 ...
- 【css】如何实现环形进度条
最近团队的童鞋接到了一个有关环形进度条的需求,想要还原一个native的沿环轨迹渐变进度条的效果,看到这个效果的时候,笔者陷入了沉思.. 环形进度条的效果,最先想到的就是使用CSS利用两个半圆的hac ...
- 446 Arithmetic Slices II - Subsequence 算数切片之二 - 子序列
详见:https://leetcode.com/problems/arithmetic-slices-ii-subsequence/description/ C++: class Solution { ...