Return to previous page

Change color background text block on hover

This topic has 4 replies, 2 voices, and was last updated 5 years, 2 months ago ago by Rose Tyler

  • Avatar: Annet
    Annet
    Participant
    October 12, 2019 at 12:09

    Hi!

    How can I add a change of background color on hover for a text block? I will add the code in the private content area.

    Please, contact administrator
    for this information.
    #223123 Copied Theme version: 5.4
    3 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 12, 2019 at 12:18

    Hello,

    You can add a custom class and code in Custom CSS for the page.
    For example –
    <span style="font-size: 30px;line-height: 1.8;font-weight: 500;color: #ffffff;font-family: nikotinusDEMO;background-color: #3d635a;padding: 3px 2vw;border-color: #000000;" class="custom-hover-by-color">Nu bekijken</span>
    where custom-hover-bg-color is your custom class, then the CSS code will be –

    .custom-hover-bg-color:hover {
    background-color: red !important;
}

    Regards

    #223124 Copied
    Avatar: Annet
    Annet
    Participant
    October 12, 2019 at 12:30

    Great, thanks!

    And what if I also want to change the type/font color on hover :-)?

    #223125 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 12, 2019 at 12:39

    You’re welcome!
    Just add CSS code like this – http://prntscr.com/piatvs

    Regards

    #223127 Copied
  • Viewing 4 results - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.Log in/Sign up

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Minimal Fashion Store – WordPress WooCommerce Theme
lazy-placeholder
Beauty – WooCommerce Theme
lazy-placeholder
Gym Store – WordPress WooCommerce Theme
lazy-placeholder
Drinks Store – WordPress WooCommerce Theme
lazy-placeholder
Restaurant – WordPress Theme
lazy-placeholder
Fishing – WooCommerce Theme
lazy-placeholder
Electronics Store – WordPress WooCommerce Theme
lazy-placeholder
Grocery Mega Market – WordPress WooCommerce Theme
lazy-placeholder
Games Dark – WordPress WooCommerce Theme
lazy-placeholder
Church – WordPress Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.