How to change hover effect for the KB Categories widget in Service Portal

[Ankit44]

I want to change the hover effect for the Category widget in the KB View page of the service portal. 

When I try to change the background color for the class ".group-item-default", it changes the whole background. But when I change the hover effect for the same class, it only changes a portion of the entire tab (As shown in image below).

I am adding the following CSS code in the widget instance CSS field:

.group-item-default :hover {
    background-color: #ff0000;
}

Please advise on how to change the color for the entire tab.

Thanks.

[Shruti]

Hi,

Try this

.list-group-item :hover {
background-color: #ff0000;
}

[Ankit44]

Hi Shruti,

Thanks for the response.

I tried using the mentioned CSS but it's still the same issue.

[Shruti]

For me its working.. Just keep only below lines in widget instance CSS , remove other hover effect styling and refresh the portal page

.list-group-item :hover {
background-color: red;
}

[Ankit44]

I have only added the code you have mentioned but it is still giving the same issue.

This is my widget instance CSS.

And this is the widget that I am using.

Also, I am using La Jolla theme if that makes any difference.