当某些元素可见时禁用 a:hover 样式；答案

【问题标题】：Disable a:hover styles when some element is visible;当某些元素可见时禁用 a:hover 样式；
【发布时间】：2010-11-01 08:16:35
【问题描述】：

感谢 Nick Craver，我得到了这个工作。它的作用是根据某物的可见状态隐藏一个类。

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

基于该东西的相同可见性，我想“禁用” a:hover，或清空 a:hover 行......不知道如何。关键是：如果某些东西是可见的，则不要应用我的 css 的 a:hover。

这里有什么线索吗？

编辑我有以下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>

谢谢，内存

【问题讨论】：

标签： jquery css

【解决方案1】：

您可以只为具有 :hover 的新类赋予原始样式，例如：

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

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

【讨论】：

我已经用更多代码更新了我的问题，也许从那里很容易得到这个...：s 有了代码，你会怎么做？
@MEM - 添加到您的选择器，将 #listaCategorias li.categoriaA a:active 设置为 #listaCategorias li.categoriaA a:active, #listaCategorias li.categoriaA a.selecionado:hover，这样即使悬停在更具体的选择器上，位置也会保持不变。
非常感谢。有效。由于这是一个幻灯片效果，如果您能理解我的话，它需要一些时间才能“打开”可见性。我很想尝试使用.click。因此，不要使用 $(this).is(':visible'));我们可以有 $(this).click 吗？
只有在 slideUp 或 slideDown 结束时才更改类。所以，我改变了顺序，这样他就改变了班级，然后，做幻灯片。这几乎可以工作：它适用于 slideDown 部分，但是，该类不会在 slideUp 上切换。 :( $('#btCategoriaA').click(function() { $('#btCategoriaA').toggleClass('selecionado', $(this).is(':visible')); $('#listaCategoriaA' ).slideToggle('slow', function() { }); });
我最终得到这样的结果： $('#btCategoriaA').click(function() { $('#btCategoriaA').toggleClass('selecionado'); $('#listaCategoriaA ').slideToggle('slow', function() { }); });所以，我已经删除了可见部分，因为如果我这样做了，那么只会在动画结束并且不打算延迟时应用该类。非常感谢您的耐心。 :D

【解决方案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;
}

【讨论】：

@SLaks - 谢谢。就 js 代码而言，这意味着什么？
@MEM：什么都没有。只需更改 CSS。
@SLaks - 我明白了！由于该类将仅应用于所需条件，因此我们将 css 更改为 ALSO 将悬停效果应用于相同的所需条件。是这样吗？ :D
我得到了与预期相反的效果。 :(
@MEM：然后您可以添加第二个类并反向切换它。（例如，a.NotSelected:hover { ... }）。