I have a <ul> where each li reponds on :hover. Here is the css:

.profile_nav_item:hover {      border-color: #af0621; } 

But it want these borders to stay colored when I click them.

I have this jQuery function:

$('a[rel="tab"]').click(function(e){         var url = $(this).attr('href');         $('.profile_nav_item').css('border-color', 'transparent');         $('.profile_nav_item', this).css('border-color', '#af0621'); 

But after clicking, the :hover css property isn't called anymore. Does anyone know how I could fix this?

Here is the fiddle: https://shortlinker.in/ZfWfqN