很多个div,要求鼠标移到某个div上面时其背景色改变。
1.作为外部容器的红色边框的DIV未被拉伸。这是因为内部DIV在float:left之后丢失了clear:both和display:块样式,因此不会打开外部DIV。
2.在浮点数的所有DIV之后:左边显示在容器DIV中,我们添加了一个这样的DIV:<div style =“clear:both”> </ div>。
3.当使用Dojo进行拖放时,由于此DIV是容器DIV的字节点,如果移动此节点,则会导致布局错误。
4.将要显示的蓝框的DIV移动到此DIV后,由于清除,它将被强制更改一行:两者。
5.修改原始HTML代码,让外部容器DIV使用此CSS。
1、作为外部容器的边框为红色的DIV,没有被撑开。这是因为内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开。
2、在容器DIV内要显示出来的float:left的所有的DIV之后,我们添加了这样的一个DIV:<div style="clear:both"></div> 。
3、在用dojo做Drag & Drop的时候,由于这个DIV是容器DIV的一个字节点,如果这个节点被移动,则会造成排版上的Bug。
4、要显示的蓝框的DIV被移到这个DIV之后,则因为clear:both,它会被强制换一行显示。
5、修改原来的HTML代码,让外部的容器DIV来使用这个CSS。
例如:
HTML:
<div class="p1"></div>
CSS:
.p1{
width:500px;
height:500px;
}
.p1:hover{
cursor:hand;
background:#F00;
}
鼠标移开时颜色得恢复。。。移上去时颜色才能改变 :)
这个不就是吗?刚开始没有颜色,移上去颜色变红,移开就又没有颜色了?
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1{
width: 100px;
height: 100px;
background: seagreen;
float: left;
}
#box2{
width: 100px;
height: 100px;
background: salmon;float: left;
}
</style>
</head>
<body>
<div id="box1" onmouseover="show()" onmouseout="back()"></div>
<div id="box2"></div>
<script>
function show() {
var qw =document.getElementById("box2")
qw.style.background = "wheat";
}
function back() {
var qw =document.getElementById("box2")
qw.style.background = "pink";
}
</script>
</body>
</html>