Question

在这里找到一些信息之后，我已经成功地在jQuery Mobile中添加了一个渐变到导航按钮。我现在的问题是为按钮添加一个带有渐变的悬停。我们将非常感激地提供任何帮助。非常感谢。以下是我的HTML＆amp; CSS：

＆＃13;

.color_tabs a {
  background-color: #0071bc !important;
  background-repeat: repeat-x !important;
  /* fallback */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#29abe2), to(#0071bc)) !important;
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-linear-gradient(top, #29abe2, #0071bc) !important;
  /* Safari 5.1, Chrome 10+ */
  background: -moz-linear-gradient(top, #29abe2, #0071bc) !important;
  /* Firefox 3.6+ */
  background: -ms-linear-gradient(top, #29abe2, #0071bc) !important;
  /* IE 10 */
  background: -o-linear-gradient(top, #29abe2, #0071bc) !important;
  /* Opera 11.10+ */
  color: #FFFFFF !important;
  text-shadow: rgb(0, 0, 0) 0.08em 0.08em 0px !important;
  border-bottom-width: 1px !important;
  border-bottom-color: #201F23 !important;
}

＆＃13;

<!-- Navigation Buttons   -->

<div data-role="main" class="ui-content" data-theme="b">


  <div data-role="controlgroup" data-theme="d" data-type="vertical" class="color_tabs">

    <a href="map.html" data-ajax="false" class="ui-btn ui-btn-text ui-icon-carat-d ui-btn-icon-right" data-transition="slideup">Our Location</a>
    <a href="#about" class="ui-btn ui-btn-text ui-icon-carat-d ui-btn-icon-right" data-transition="slideup">About Us</a>
    <a href="#weoffer" class="ui-btn ui-btn-text ui-icon-carat-d ui-btn-icon-right" data-transition="slideup">We Offer</a>
    <a href="#service" class="ui-btn ui-btn-text ui-icon-carat-d ui-btn-icon-right" data-transition="slideup">Service Check</a>
    <a href="#body" class="ui-btn ui-btn-text ui-icon-carat-d ui-btn-icon-right" data-transition="slideup">Body Shop</a>
    <a href="#accservice" class="ui-btn ui-btn-text ui-icon-carat-d ui-btn-icon-right" data-transition="slideup">Accident Services</a>
    <a href="#contact" class="ui-btn ui-btn-text ui-icon-carat-d ui-btn-icon-right" data-transition="slideup">Contact</a>

  </div>
  <!--/ Navigation Buttons-->

＆＃13;

Answer 1

在CSS中添加悬停

.color_tabs a:hover {
   background-color: #CCC !important;
   ...
   ...
   .. other gradients styles
}

如何在jQuery Mobile

1 个答案: