Нужно чтоб .button вместе с .li меняли задний план у меня не выходит помогите пожалуйста
:root {
--gray: #e4e4e4;
--lightgray: #F6F6F6;
}
/*SIDEBAR*/
.SideBar {
width: 360px;
height: 560px;
padding-top: 25px;
padding-bottom: 150px;
margin-left: 195px;
background-color: white;
list-style-type: none;
}
.INsideBar {
font-size: 16px;
}
.SidebarItems {
padding-left: 70px;
padding-top: 15px;
padding-bottom: 15px;
display: flex;
gap: 20px;
}
.button:hover {
background-color: var(--lightgray);
transition: 0.5s;
}
.SidebarItems:hover {
background-color: var(--lightgray);
transition: background 0.5s ease;
}
* {
padding: 0;
margin: 0;
border: 0;
}
*,
*::before,
*::after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:focus,
:active {
outline: none;
}
a:focus,
a:active {
outline: none;
}
nav,
footer,
header,
aside {
display: block;
}
html,
body {
height: 100%;
width: 100%;
font-size: 100%;
line-height: 1;
font-size: 14px;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
input,
button,
textarea {
font-family: inherit;
}
input::-ms-clear {
display: none;
}
button {
cursor: pointer;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
a,
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
ul li {
list-style: none;
}
img {
vertical-align: top;
}
html,
body {
max-width: 1920px;
font-family: Montserrat;
background-color: var(--gray);
}
button {
/* Сбрасываем дефолтные стили */
border: none;
outline: none;
text-align: center;
text-decoration: none;
background-color: white;
font-size: 16px;
}<body>
<div class="SideBar">
<ul class="INsideBar">
<li class="SidebarItems">
<button class="button">
<img src="SVG/GROUP1.svg" >
Новини
</button>
</li>
<li class="SidebarItems">
<button class="button">
<img src="SVG/Group2.svg" >
Події міста
</button>
</li>
<li class="SidebarItems">
<button class="button">
<img src="SVG/Group3.svg" >
Веб-камери
</button>
</li>
<li class="SidebarItems">
<button class="button">
<img src="SVG/Group4.svg" >
Екскурсії та розваги
</button>
</li>
<li class="SidebarItems">
<button class="button">
<img src="SVG/group5.svg" >
Транспорт Кам’янця
</button>
</li>
<li class="SidebarItems">
<button class="button">
<img src="SVG/Group6.svg" >
Де перекусити
</button>
</li>
<li class="SidebarItems">
<button class="button">
<img src="SVG/Group7.svg" >
Де зупинитись
</button>
</li>
<li class="SidebarItems">
<button class="button">
<img src="SVG/Group8.svg" >
Навчальні заклади
</button>
</li>
</ul>
</div>
<body/>Источник: Stack Overflow на русском