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

感谢Nick Craver，我得到了这个工作。它做什么，它显示了基于某事物可见状态的类。当某些元素可见时禁用a：悬停样式;

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

基于同样可见的东西，我想为“禁用”的一个：悬停，或清空答：悬停线...不知道怎么样。重点是：如果有东西可见，则不应用我的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>

感谢， MEM

来源

2010-10-31 MEM

你可以给新的类:hover原来的造型，例如：

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

这样的a.selecionado:hover选择是更具体的，所以原来的非悬停造型胜出。

来源

2010-11-01 00:11:19

我。已经用更多的代码更新了我的问题，也许从那里可以很容易地得到这个...：s有了代码，你会怎么做？ – MEM 2010-11-01 00:19:06

@MEM - 添加到您的选择，让'#listaCategorias li.categoriaA一个：active'成'#listaCategorias li.categoriaA一：主动，#listaCategorias li.categoriaA a.selecionado：hover'这样的位置，即使枝盘旋，当更具体的选择器。 – 2010-11-01 00:20:48

非常感谢。有效。由于这是一个slideDown效果，因此如果您能够理解我，则需要一段时间才能将可见性“打开”。我很想尝试使用.click。所以，而不是有$（this）.is（'：visible'））;我们可以有$（this）.click？ – MEM 2010-11-01 00:40:12

最简单的办法是改变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; 
}

来源

2010-10-31 23:46:40 SLaks

@SLaks - 谢谢。这对于js代码来说意味着什么？ – MEM 2010-10-31 23:48:13

@MEM：没什么。只需更改CSS。 – SLaks 2010-10-31 23:52:52

@SLaks - 我看到了！由于该类仅适用于所需条件，因此我们将css更改为也将悬停效果应用于相同的所需条件。是吗？：D – MEM 2010-10-31 23:55:17

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

回答

相关问题