Сохранение эффекта наведения при нажатии на пункт меню ⇐ Html

[Anonymous]

Я создал панель навигации с эффектом .hover, но я хочу, чтобы этот эффект, который я добавил, оставался или добавлялся, когда я использую .click, а также хочу удалить этот эффект, когда я щелкаю другую панель. Извините, что запутал
Мой код выглядит следующим образом:
html:

Home
Dessert
About Us


CSS:
#menubar {
height: 30px;
width: 100%;
background-color: gray;
}

.menubutton {
height: 30px;
width: 60px;
background-color: gray;
display: inline-block;
color: black;
transition: background-color 0.5s ease;
}

.active {
height: 30px;
width: 60px;
background-color: white;
color: red;
}

jQuery:
$('.menubutton').hover(function() {
$(this).addClass('active');
},
function() {
$(this).removeClass('active');
});


Подробнее здесь: https://stackoverflow.com/questions/246 ... -menu-item