当某个元素可见时，禁用a：悬停样式;

Question

感谢Nick Craver，我得到了这个工作。它做了什么，它显示了基于某些事物的可见状态隐藏了一个类。

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

基于同样可见的东西，我想“禁用”a：悬停，或者清空a：悬停线...不确定如何。关键是：如果有什么东西是可见的，那就不要应用a：hover of my css。

这里有任何线索吗？

修改 我有以下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

最简单的解决方案是将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;
}

Answer 2

您可以使用:hover原始样式给新类别，例如：

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

这样a.selecionado:hover选择器更加具体，因此原始的非悬停样式会胜出。