Как правильно изменить outline при focus через tab
Подскажите пожалуйста как через CSS ну или в крайнем случае JS, можно реализовать outline через TAB, но чтобы он не появлялся если зажать на интерактивный элемент и отвести мышку.
.menu__item-link {
display: block;
padding: 50px 50px;
width: 100px;
margin: auto auto;
text-align: center;
color: #323232;
text-decoration: none;
background-color: #e7e7e7;
}
.menu__item-link:focus {
outline: 2px solid #f00;
}<b>Зажмите ссылку и отведите мышку в сторону, outline остается, даже если мы просто нажмем на ссылку, хотя это можно перебить через :active, но после все равно появится аутлайн.</b>
<a class="menu__item-link" href="#"><span>Каталог</span></a>Так вот, как сделать так чтобы рамка появлялась только переключением через tab?