当某些元素可见时，禁用a:悬停样式；

Question

多亏了尼克·克雷弗，我才能做到这点。它所做的，它显示隐藏了一个基于某物的可见状态的类。

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

基于同一可见的东西，我想“禁用”a:悬停，或清空a:悬停线.不知道怎么做。关键是:如果有什么东西是可见的，不要应用我的css的a:悬浮。

这里有线索吗？

编辑I有以下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;
}

而HTML部分：

<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>

谢谢，MEM

Answer 1

您可以使用:hover为这个新类提供原始样式，例如：

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

这样，a.selecionado:hover选择器就更具体了，所以原来的非悬停造型就赢了.

Answer 2

最简单的解决方案是将a:hover选择器更改为a.selecionado:hover，这将导致:hover规则只匹配具有该类的元素。

编辑

Javascript：

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

CSS：

a.NotSelected:hover {
    color: pink;
}