将鼠标悬停在外面以填写整个页面

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;
}

Answer 1

它的工作就像这样✌

#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); 
}

Answer 2

两种方式：1）使用具有100％宽度和100％宽度的父容器，并使其可以悬空。

像这样：

<div class='hoverable'>
 <div class='your-middle-div'> 
 </div>
</div>

和CSS

.hoverable {
position: relative;
height: 100%;
width: 100%;
}

.hoverable:hover > .your-middle-div {
background: blue;
}

2）使用填充而不是边距在中心对齐。填充物对悬停作出反应