如何将背景颜色大小从 0 悬停到 100% [重复]

Question

我想将:hover 伪类添加到h1。首先，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

您必须使用“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>

Answer 2

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

.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 标签中添加了一个文本以便于使用，因为我想您确实有一些文本。