The jQueryMobile framework uses the ui-btn-hover class to theme the button hover event. This recipe shows you how to override the style for the button hover event of an existing swatch.
Copy the full code of this recipe from the code/10/button-hover source folder. You can launch this code using the URL: http://localhost:8080/10/button-hover/main.html.
- Create
main.html, and add the following<style>tag to the<head>section:<link rel='stylesheet' href= 'http://code.jquery.com/mobile/1.1.1/jquery.mobile- 1.1.1.min.css' /> <style> .ui-btn-hover-a { border: 1px solid #115e00; background: #51b54a; font-weight: bold; color: #fff; text-shadow: 0 1px 1px #197d19; background-image: -webkit-gradient(linear, left top, left bottom, from( #7ad66f), to( #41a343)); background-image: -webkit-linear-gradient( #7ad66f, #41a343); background-image: -moz-linear-gradient( #7ad66f, #41a343); background-image: -ms-linear-gradient( #7ad66f, #41a343); background-image: -o-linear-gradient( #7ad66f, #41a343); background-image: linear-gradient( #7ad66f, #41a343); } </style> - Create the
#mainpage and add a button to the page content:<a href='#' data-role='button'>button</a>
In main.html, define the override for the .ui-btn-hover-a class after linking thejQuery Mobile stylesheet, as shown in the code. Specify the border, background, color, text-shadow, and background-image CSS attributes. Create the #main page with data-theme='a', and add a button to the page content. Load the page, and on button hover you will see that the button gets a bright green color instead of the default hover style, as shown in the following screenshot:
You can also theme the button hover for swatch A using the jQuery Mobile ThemeRoller tool available at http://www.jquerymobile.com/themeroller.
You can configure the delay for the button hover by setting the buttonMarkup.hoverDelay (defaults to 200 ms) configuration on mobileinit. But take care, as using values that are too large or too small will impact the user experience. You can use the following code to configure this property:
$(document).bind('mobileinit', function() {
$.mobile.buttonMarkup.hoverDelay = 500;
});- The Using the ThemeRoller tool to create a swatch recipe
- The Using CSS to create a bouncing page transition recipe in Chapter 2, Pages and Dialogs: This recipe provides a note on vendor prefixes