注册 登录
编程论坛 WEB前端(UI)

关于 hover 的用法

素面修行 发布于 2014-06-18 18:00, 1580 次点击
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.div1{width:200px;height:200px;background-color: blue;}
.div2{width:200px;height:200px;background-color: yellow;}
.div1:hover ~div{background-color: red;}/*为什么用~div呢?*/
/*.div1:hover .div2{background:#90F;}  为什么此句不可以呢?*/
</style>
</head>

<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
7 回复
#2
寒风中的细雨2014-06-19 09:11
想要什么效果呀?
#3
素面修行2014-06-22 11:53
回复 2 楼 寒风中的细雨
想要鼠标移到第一个方块时 第二个方块要变色  但是为什么用.div1:hover ~div{background-color: red;}可以实现
用这句.div1:hover .div2{background:#90F;}  就不可以呢?   谢谢你
#4
ddyy2014-06-22 13:16
想通过第一个色块的事件来操作第二个色块的样式,最好用javascript实现,用jquery更方便,仅仅用css来实现不方便
#5
keefelu2014-08-13 17:55
.div1:hover .div2写法错误,要用逗号隔开,用来定义div1:hover和div2的样式.div1:hover .div2写法错误,要用逗号隔开,用来定义div1:hover和div2的样式.div1:hover .div2写法错误,要用逗号隔开,用来定义div1:hover和div2的样式.div1:hover .div2写法错误,要用逗号隔开,用来定义div1:hover和div2的样式

[ 本帖最后由 keefelu 于 2014-8-22 14:25 编辑 ]
#6
casperhe012014-08-29 09:33
要看实现什么效果,一般对div的样式改变的话,用Javas比较好。用css多用于对div中某些元素的hover效果,如a,ul,li等。
#7
qianrenzhang2015-01-26 14:01
跟着学习的飘过、
#8
qianrenzhang2015-01-27 01:11
ding
1