Если вы хотите прослушивать оба события hover и click, вы не можете сделать это с помощью одного CSS, и для этой цели вам следует использовать javascript.
Допустим, у вас есть <a> с существующим классом linkOnMouseDropDown, поэтому всякий раз, когда кто-то наводит курсор на него или щелкает по нему, вам нужен новый класс для него. Вы можете обрабатывать часть hover только с CSS следующим образом:
.linkOnMouseDropDown:hover {
color: red;
}
Но для части click вы должны добавить новый прослушиватель событий для click и всякий раз, когда целевой элемент содержит linkOnMouseDropDown мы добавляем к нему новый класс с именем newClass.
document.addEventListener('click', function (e) {
if (e.target.classList.contains('linkOnMouseDropDown')) {
e.target.classList.add('newClass');
} else {
document.querySelector('.linkOnMouseDropDown').classList.remove('newClass');
}
})
Итак, ваш окончательный код должен быть примерно таким:
function addOrRemoveClass(e) {
if (e.target.classList.contains('linkOnMouseDropDown')) {
e.target.classList.add('newClass');
} else {
document.querySelector('.linkOnMouseDropDown').classList.remove('newClass');
}
}
document.addEventListener('click', addOrRemoveClass)
.linkOnMouseDropDown:hover, .newClass {
color: red;
}
<ul class=" nav navbar-nav navbar-right">
<li appDropdown>
<a class="dropdown-toggle linkOnMouseDropDown" role="button">Manage <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="dropDownOption">Save Data</a></li>
<li><a class="dropDownOption">Fetch Data</a></li>
</ul>
</li>
</ul>
ОБНОВЛЕНИЕ
Поскольку вам нужно машинописное решение для этого, вам просто нужно обработать ввод параметров для вашей функции.
Так что вам просто нужно заменить часть js на это:
function addOrRemoveClass(e: any): void {
if (e.target.classList.contains('linkOnMouseDropDown')) {
e.target.classList.add('newClass');
} else {
document.querySelector('.linkOnMouseDropDown')?.classList.remove('newClass');
}
}
document.addEventListener('click', addOrRemoveClass)
Рабочая демонстрация: codepen.io