为了账号安全,请及时绑定邮箱和手机立即绑定

有没有CSS3方法可以当鼠标浮动在控件A上时,控件B发生改变

有没有CSS3方法可以当鼠标浮动在控件A上时,控件B发生改变

门牙有点晃 2016-04-21 19:26:44
纯CSS3方法可以解决么?鼠标浮动在A上时,B和C还有D触发动画效果。
查看完整描述

2 回答

已采纳
?
qq_青枣工作室_0

TA贡献446条经验 获得超754个赞

当然可以。利用 :hover 加上各种CSS选择器的定位技巧。

<!DOCTYPE html>
<style>
	.A {
		line-height: 40px;
	}
	.B, .C, .D{
	        -webkit-transition: 1s;
		transition: 1s;
	}
	.B  {
		width: 400px;
		height: 500px;
		background-color: red;
	}
	.C{
		width: 300px;
		height: 200px;
		background-color: green;
	}
	.D {
		width: 300px;
		height: 200px;
		background-color: blue;
	}
	.A:hover + .B {
		width: 500px;
	}
	.A:hover + .B>.C {
		width: 100px;
	}
	.A:hover + .B>.D {
		width: 500px;
	}
</style>

<a class="A" href="#">hover me!!</a>

<div class="B">
	B
	<div class="C">
		C
	</div>
	<div class="D">
		D
	</div>
</div>

//img1.sycdn.imooc.com//5718d8c40001449404190535.jpg

查看完整回答
3 反对 回复 2016-04-21
?
qq___524

TA贡献171条经验 获得超74个赞

这好像只能用js吧

查看完整回答
反对 回复 2016-04-21
  • 2 回答
  • 0 关注
  • 1669 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信