Not sure why I can't resize a div?-CodePudding

I am not sure why I can't resize a basic div.

i create a div and add the following.

<!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>

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

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

<div>
</div>

I looked at example all over the net and this should work but it doesn't. any help is appreciated.

CodePudding user response：

There was a typo in your code. Remove the extra space in div :hover as below.

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

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

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

<div>
</div>

CodePudding user response：

Remove the space between the div tag and the :hover pseudo-class in your stylesheet:

div:hover { 
... 
}