CODEWITHSUNDEEP
javascriptjquery
james emanon
james emanon

Reputation: 11837

Jquery - is it possible to bind css hover/focus behaviours to keydown?

I hope I can be succinct with my question.

Lets say I have some css defined.

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

Now, in my jquery code how can I create or possible bind a tab press with that css above. Sorta have the tab keypress inherit that css behaviour?

Perhaps I am overthinking it here.

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

That is a snippet, basically a user tabs on that link - and I have a popup that shows.. but instead of explicitly eventHandling and poping it etc.. I was hoping that i could use my CSS to somehow become binded to my tab/keypress.. possible? So a tab would be the same as 'hover' etc..

Upvotes: 3

Views: 1376

Answers (2)

Chandu Dexter
Chandu Dexter

Reputation: 456

Actually if you use a css selector on anchor element focus state, you will achieve that effect. Here is the snippet you might need.

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

jsFiddle just to try http://jsfiddle.net/greenrobo/eLCmM/

Upvotes: 2

hobberwickey
hobberwickey

Reputation: 6444

The easiest way would be to just toggle .someCSS on keypress so 

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

If that will turn on/off the hovering css. If you just want to toggle whatever style the hover turns on and off, just move those style to an .active class and toggle that class instead so

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

Upvotes: 1

Related Questions