List Items not changing on hover - html

Question

Using Bootstrap 4, I'm having difficulty targetting the list items on hover. I'm trying to have a default color of the text to a gray, but on hover, make the text a regular black, and on active, have the text white, bolded, with a background color for the different states of the list items.
Here's what it looks like now:
Here is my HTML:
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="card-header">
<h4 class="card-title">
<img src="resources/icons/icon-monster/iconmonstr-gear-11-48.png" alt="" class="mr-2">
Account Settings
</h4>
</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item active">About You</li>
<li class="list-group-item">Education and background</li>
<li class="list-group-item">Professional Development</li>
<li class="list-group-item">Password</li>
<li class="list-group-item">Email/Notifications</li>
<li class="list-group-item">Reviews</li>
<li class="list-group-item">Privacy Settings</li>
</ul>
</div>
</div>
</div><!--end of col-sm-4-->
Here is my CSS:
/*----------------------------------------*/
/*--------SIDEBAR ACCOUNT SETTINGS---------*/
/*-----------------------------------------*/
.list-group-item.active {
background-color: #328cc1;
border-color: #328cc1;
font-weight: bold;
color: #fff;
}
.list-group-item {
color: gray;
}
.list-group-item: hover {
color: black;
}
Everything works great except the list item isn't capturing the change on hover. I've tried targetting it by ul li .list-group-item: hover and that doesn't work either.

Answer 1

There's a space between : and hover. That was the problem with it.
.list-group-item.active {
background-color: #328cc1;
border-color: #328cc1;
font-weight: bold;
color: #fff;
}
.list-group-item {
color: gray;
}
.list-group-item:hover {
color: black;
}
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="card-header">
<h4 class="card-title">
<img src="resources/icons/icon-monster/iconmonstr-gear-11-48.png" alt="" class="mr-2"> Account Settings
</h4>
</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item active">About You</li>
<li class="list-group-item">Education and background</li>
<li class="list-group-item">Professional Development</li>
<li class="list-group-item">Password</li>
<li class="list-group-item">Email/Notifications</li>
<li class="list-group-item">Reviews</li>
<li class="list-group-item">Privacy Settings</li>
</ul>
</div>
</div>
</div>
<!--end of col-sm-4-->