jquery - Disable a:hover styles when some element is visible;

Question

Thanks to Nick Craver, I got this working. What it does, it shows hides a class based on the visible state of something.

$('#btCategoriaA').click(function() {
  $('#listaCategoriaA').slideToggle('slow', function() {
    $('#btCategoriaA').toggleClass('selecionado', $(this).is(':visible'));
  });
});

Based on the same visible of that something, I would like to "disable" the a:hover, or to empty the a:hover lines... not sure how. The point is: If something is visible, to NOT apply the a:hover of my css.

Any clue here?

EDIT I have the following css:

#listaCategorias li.categoriaA a:hover {
    background-position: 0px -79px;
}

#listaCategorias li.categoriaA a:active {
    background-position: 0px -158px;
}

#listaCategorias li.categoriaA .selecionado {
    background-position: 0px -158px;
}

And the HTML part:

<ul id="listaCategorias">
  <li class="categoriaA"><a id="btCategoriaA" href="#">Categoria A</a></li>
  <li class="categoriaB"><a id="btCategoriaB" href="#">Categoria B</a></li>
  <li class="categoriaC"><a id="btCategoriaC" href="#">Categoria C</a></li>
</ul>

Thanks, MEM

Answer 1

You could just give that new class with :hover the original styling, for example:

a, a.selecionado:hover { color: black }
a:hover { color: red; }

This way the a.selecionado:hover selector is more specific, so the original non-hover styling wins out.