當某些元素可見時禁用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：懸停樣式;

回答

相關問題