Наведите курсор снаружи, чтобы заполнить всю страницу

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

Два способа: 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) Используйте отступы поля отступа для выравнивания по центру.Прокладки реагируют на зависание

Answer 2

Его работа такова ✌

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