<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>9</title>
<style>
*{margin: 0;padding: 0;}
div{text-align: center;line-height: 80px; font-size: 30px;}
#a{width: 100px;height: 90px;background-color: gray;float: left;}
/*a的划过*/
#a:hover{
transform: scale(2);background-color: #0FC;font-weight: bold;
}
/*2. 鼠标划过A时,A变大2倍其他所有元素的位置不变，且A的背景色为红色，字体加粗（代码无误、效果符合要求各10分）*/
#b{width: 100px;height: 170px;background-color: green;float: left;}
#b{line-height: 170px;}
#b:hover{/*b的划过*/
transform: scale(1.2);background-color: #CFC;font-weight: bold;
}
#c{width: 95px;height: 80px;background-color: chocolate;
float: left;margin-top: 90px;margin-left: -200px;
}
#c:hover{/*c的划过*/
transform: scale(1.5);background-color: yellow;font-weight: bold;
}
</style>
</head>
<body>
<div id="a">
A
</div>
<div id="b">
B<!--鼠标划过B时，A还原B变大1.2倍,C不变，且B的背景色为粉色，字体加粗（代码无误、效果符合要求各10分）-->
</div>
<div id="c">
C
<!--鼠标划过C时，C变大1.5倍，其他不变，且C的背景色为黄色，字体加粗（代码无误、效果符合要求各10分）-->
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>9</title>
<style>
*{margin: 0;padding: 0;}
div{text-align: center;line-height: 80px; font-size: 30px;}
#a{width: 100px;height: 90px;background-color: gray;float: left;}
/*a的划过*/
#a:hover{
transform: scale(2);background-color: #0FC;font-weight: bold;
}
/*2. 鼠标划过A时,A变大2倍其他所有元素的位置不变，且A的背景色为红色，字体加粗（代码无误、效果符合要求各10分）*/
#b{width: 100px;height: 170px;background-color: green;float: left;}
#b{line-height: 170px;}
#b:hover{/*b的划过*/
transform: scale(1.2);background-color: #CFC;font-weight: bold;
}
#c{width: 95px;height: 80px;background-color: chocolate;
float: left;margin-top: 90px;margin-left: -200px;
}
#c:hover{/*c的划过*/
transform: scale(1.5);background-color: yellow;font-weight: bold;
}
</style>
</head>
<body>
<div id="a">
A
</div>
<div id="b">
B<!--鼠标划过B时，A还原B变大1.2倍,C不变，且B的背景色为粉色，字体加粗（代码无误、效果符合要求各10分）-->
</div>
<div id="c">
C
<!--鼠标划过C时，C变大1.5倍，其他不变，且C的背景色为黄色，字体加粗（代码无误、效果符合要求各10分）-->
</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
