如何设置悬停背景色大小从0到100%

Question

我想在h1中添加:hover伪类。首先，background-color必须等于= 0%(我为测试添加了一种颜色，但在最后背景颜色将是白色)，然后当悬停到h1时，background-color必须是灰色的，大小为100% 100%。我不能那样做。:")

.back{
border: 1px solid black;
width: 250px;
background-color: tomato;
height: 100px;
background-size: 0% 100%;
background-repeat: no-repeat;
transition: 1s all;

}
.back:hover{

background-color: gray;
background-size: 100% 100%;

}

<h1 class="back"></h1>

Answer 1

从你的评论来看，你似乎想要这样的东西，如果我错了，请纠正我。

.back{
border: 1px solid black;
width: 250px;
background-color: white;
height: 100px;
width: 0%;
background-repeat: no-repeat;
transition: 1s all;

}
.back:hover{

background-color: gray;
width: 250px;

}

<h1 class="back">Header</h1>

我在你的h1标签中添加了一个文本，以便于使用，因为我想你确实有一些文本在那里。

Answer 2

必须使用"div"不是h1。另外，你应该设置body的高度为100%，这样在悬停时，你的div得到全屏

HTML, body{
height:100%
}
.back{
border: 1px solid black;
width: 250px;
background-color: tomato;
height: 100px;
background-repeat: no-repeat;
transition: 1s all;

}
.back:hover{

background-color: gray;
width: 100%;
height: 100%;

}

<div class="back"></div>