css - 悬停在外面以填写整个页面

Question

我在页面中间有一个 div，如何将它悬停在外面以填充整个页面？这是一张照片：

#div1 {
    width: 85%;
    height: 270px;
    border: 1px solid #663399;
    padding-top: 20px;
    padding-left: 20px;
    margin-right: 25%;
    background-color: #663399;
    border-radius: 20px;
    transition: width 1s, height 1s;
    transition: width 1s, height 1s;
}

标签： css

Answer 1

它的工作是这样的✌</p>

#div1 {
    width: 85%;
    height: 270px;
    border: 1px solid #663399;
    padding-top: 20px;
    padding-left: 20px;
    margin-right: 25%;
    background-color: #663399;
    border-radius: 20px;
    transition: width 1s, height 1s;
    transition: width 1s, height 1s;
    transition: outline 2s;
}

#div1:hover {
      outline: 1080px solid rgba(102,51,153,1); 
}