如何让一个元素hover时，让指定区域的产生背景色，在线等？
### 问题描述
现在一个div高为50px宽为200px，我想让它hover时，只让这个div的高为40px，宽为200px的区域产生背景色，切要居中
### 相关代码
css
```
div{
    height: 50px; 
    width: 200px; 
    background: slategrey;
}
div:hover{
    /*background: red;*/
}
```
html结构
```
<div>
    TEST
</div>
```
### 有什么解决方法吗？
```
div:hover {
  background: linear-gradient(to bottom,slategrey 5px,red 0,red 45px,slategrey 0);
}
```