Title: Remove hover effect from screen-reader-text Quantity Label
Last modified: June 28, 2022

---

# Remove hover effect from screen-reader-text Quantity Label

 *  Resolved [kimcoetzee](https://wordpress.org/support/users/kimcoetzee/)
 * (@kimcoetzee)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/remove-hover-effect-from-screen-reader-text-quantity-label/)
 * Hi There
 * I’ve been trying to find a way where I can both show the quantity label on a 
   single product page as well as change that label to Length (m)
 * By using CSS to show .woocommerce-variation-add-to-cart .screen-reader-text and
   then adding a pseudo class I’ve been able to achieve this.
 * However, there is a substantial amount of hover styling on the screen reader 
   text that has thus far thwarted my efforts.
 * As per the link provided you will see that I am aiming for a quantity field that
   is styled the same way as the variations.
 * Could you either assist by advising how one goes about showing only the quantity
   title (sans product name) as well as where one can amend that word to read Length(
   m) or
 * provide assistance as to how I can remove the hover effects on the class in that
   region.
 * Hoping that you can assist.
 * Thank You
 * Regards
    Kim
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fremove-hover-effect-from-screen-reader-text-quantity-label%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [hegenberg](https://wordpress.org/support/users/hegenberg/)
 * (@hegenberg)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/remove-hover-effect-from-screen-reader-text-quantity-label/#post-15779379)
 * Hi [@kimcoetzee](https://wordpress.org/support/users/kimcoetzee/)
 * You can add the following custom CSS code to remove the hover effects on your“
   Length” field:
 *     ```
       /* Remove hover effect on "Length" field on single product pages -  https://wordpress.org/support/?p=15778963 */
       .woocommerce.single #content div.product .cart .quantity input:hover {
         margin-left: 10px !important;
         margin-top: 0px !important;
         float: none !important;
       } 
       .woocommerce-variation-add-to-cart .screen-reader-text:hover{
           margin: -1px !important; display:inline !important; top:0px !important; left:0px !important; padding:0px !important;
       }
       ```
   
 * For further support with customizations, I recommend hiring a developer or one
   of the customization experts listed here:
 * [https://woocommerce.com/customizations/](https://woocommerce.com/customizations/)
 * Regards
 *  Thread Starter [kimcoetzee](https://wordpress.org/support/users/kimcoetzee/)
 * (@kimcoetzee)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/remove-hover-effect-from-screen-reader-text-quantity-label/#post-15782041)
 * Thank you so much!!!
 * That worked.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Remove hover effect from screen-reader-text Quantity Label’ is closed
to new replies.

 * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504)
 * [WooCommerce](https://wordpress.org/plugins/woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [kimcoetzee](https://wordpress.org/support/users/kimcoetzee/)
 * Last activity: [3 years, 11 months ago](https://wordpress.org/support/topic/remove-hover-effect-from-screen-reader-text-quantity-label/#post-15782041)
 * Status: resolved