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;
}
精彩评论