开发者

Traversing a set of buttons on keypress using Jquery

I'm pretty new with JQuery and I'm having trouble creating a behaviour that would allow me to traverse a set of buttons on keypress (left and right buttons on the keyboard). Each keypress should change the background colour of the current button.

HTML:

<div id="featured_video_button_controls">
    <input class="featured_video_buttons" type="button" value="Fullscreen" />
    <input class="featured_video_buttons" type="button" value="Replay" onClick="ReplayVideo()" />
    <input class="featured_video_buttons开发者_运维问答" type="button" value="View Event" onClick="window.location.href='http://www.google.ca'" />
    <input class="featured_video_buttons" type="button" value="Back" onClick="window.history.back()" />
</div>

CSS:

.featured_video_buttons
{
    width: 145px;
    height: 35px;
    background-image:url(/Content/Images/web_button_grey_bg.png); 
    font-weight: bold;  
}

.featured_video_buttons:hover
{
    background-image:url(/Content/Images/web_button_red_bg.png);
    color: White;    
}

Any help would be appreciated!

Thanks.


$('.featured_video_buttons').keydown(function(e){
    if (e.keyCode == 37) {
       $(this).toggleClass('hovered');
       $(this).last().toggleClass('hovered');
    }
    if (e.keyCode == 39) {
       $(this).toggleClass('hovered');
       $(this).next().toggleClass('hovered');
    }
}

Change the css to

input.hovered{
   background-image:url(/Content/Images/web_button_red_bg.png);
   color: White;    
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜