jquery - 是否可以將css懸停/焦點行爲綁定到keydown？

我希望我的問題能夠簡潔。jquery - 是否可以將css懸停/焦點行爲綁定到keydown？

可以說我有一些css的定義。

.someCSS-name:hover > .list-item, 
.someCSS-name:active > .list-item, 
.someCSS-name:focus > .list-item { display:block; }

現在，在我的jQuery代碼中，如何創建或可能綁定一個選項卡按上述css。 Sorta有tab鍵繼承那個css行爲？

也許我在這裏超越了它。

<li class="someCSS-name" id="linkoneli"> 
    <a href="someURL" id="linkonenav">Link One</a> 
    <div class="list-item">show this content</div> 
</li>

這是一個片段，基本上是一個鏈接，用戶標籤 - 我有一個彈出窗口，顯示了..但不是明確eventHandling和坡平也等。我希望我可以用我的CSS以某種方式成爲綁定到我的標籤/按鍵...可能嗎？因此，一個標籤將是一樣的「懸停」等。

來源

2013-01-24 james emanon

嘗試tabindex'加上'以貴麗：http://jsfiddle.net/kXWUZ/ – dfsq

其實，如果你使用的錨元素焦點狀態的CSS選擇器，你會達到這個效果。這是您可能需要的片段。

#linkonenav:focus ~ .list-item { 
    display: block; 
}

的jsfiddle只是嘗試http://jsfiddle.net/greenrobo/eLCmM/

來源

2013-01-24 22:30:39

css選擇器中的'〜'和'+'將選擇一個元素的同胞。 '〜'是[General Sibling Selector]（http://reference.sitepoint.com/css/generalsiblingselector），'+'是[Adjacent Sibling Selector]（http://reference.sitepoint.com/css/adjacentsiblingselector）。 –

我喜歡這個。它只能在某些瀏覽器中使用嗎？此外，你可以像這樣使用它：.some-selector-css：focus〜> .second-selector {display：block} --->我只是不明白「爲什麼」選項卡在這種情況下工作。謝謝。 –

'+'可從CSS2獲得，而'〜'來自CSS3。所有主流瀏覽器都支持這兩種，因爲現在CSS3非常受歡迎。您可以在上面提供的鏈接中檢查瀏覽器的兼容性。因爲有兩個連續的符號選擇符（'>'和'〜'），所以我認爲你不能使用'.some-selector-css：focus〜> .second-selector {display：block}'。我建議像這樣做 '.some-selector-css：focus〜.sib> .second-selector {display：block}' –

最簡單的方法是隻需撥動按鍵時這樣

$('.myElements').toggleClass('someCSS');

.someCSS如果將開啓/關閉徘徊的CSS。如果你只是想切換懸停打開任何風格和關閉，只要將這些風格發揮到了。主動類和切換該類代替

$('.someCSS').toggleClass('.active');

來源

2013-01-24 21:15:58 hobberwickey

我很欣賞你的答覆 - 是啊，這就是我指的是因爲必須通過製表順序等工作，並做你以上的。我可能不得不使用這個。但我希望有一些jQuery的方式來做這樣的事情：jQuery.inherit（'focus'，。SomeCSS-name，'tab'）..哈哈。一廂情願的想法。 –

可能有一些祕密伏都教，但我認爲javascript/css事件是分開的。我不知道有什麼辦法可以觸發對方。 – hobberwickey

jquery - 是否可以將css懸停/焦點行爲綁定到keydown？

回答

相關問題