Disable a:hover styles when some element is visible;

Question

Hello all again,

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

The simplest solution is to change the a:hover selector to a.selecionado:hover, which will cause the :hover rules to only match the element if it has that class.

EDIT:
Javascript:

$('#btCategoriaA').toggleClass('selecionado', $(this).is(':visible'));
$('#btCategoriaA').toggleClass('NotSelected', !$(this).is(':visible'));

CSS:

a.NotSelected:hover {
    color: pink;
}