为什么我设置的div在hover状态下的尺寸调整效果无法生效

问题原因 #

你的CSS代码中div :hover选择器多了一个多余的空格：

• 带空格的div :hover是选中div内部所有子元素的悬浮状态，你当前的div没有任何子元素，所以样式永远不会被触发
• 正确写法是div:hover，二者紧连没有空格，才表示选中div自身被鼠标悬浮的状态

修正后的完整代码 #

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<title>New page</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div></div>
</body>
</html>

CSS部分（写在css/style.css文件中）

div {
    width: 400px;
    height: 400px;
    background-color: orange;
}

div:hover {
    width: 600px;
    height: 600px;
}

可选优化 #

如果想要调整大小的过程有平滑过渡效果，可以给div加transition属性，示例：

div {
    width: 400px;
    height: 400px;
    background-color: orange;
    /* 所有属性变化0.3秒内平滑过渡 */
    transition: all 0.3s ease;
}

内容的提问来源于stack exchange，提问作者Dennis445